ボタンの特定の番号を選択し、[変更]を選択した後、それらの色は、私はJavaScriptで新たなんだと私は助けを必要と私はsombodyが役立つ場合感謝される

Question

ul.number-list li { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 
ul.number-list li a { 
 
    display: block; 
 
    width: 35px; 
 
    height: 35px; 
 
    -webkit-border-radius: 35px; 
 
    border-radius: 35px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    background: purple; 
 
    color: #fff; 
 
    cursor: pointer; 
 
}

<ul class="number-list"> 
 
    <li> 
 
    <a role="button">1</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">11</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">31</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">16</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">6</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">21</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">2</a> 
 
    </li> 
 
    <li> 
 
    <a role="button">44</a> 
 
    </li> 
 
</ul>

選択ということができる方法を作ります！ この場合、私はボタンのリストを持っており、6つのボタンのような選択ボタンの数を制限したい。各ボタンは一度だけ選択することができ、それを選択した後にchange.helpを書く。あなた

Answer 1

var SelectCount=0; 
 
function ButtonSelected(id) { 
 
    if (SelectCount < 3) { 
 
     document.getElementById(id).style.backgroundColor="red"; 
 
     SelectCount+=1; 
 
    } 
 
}

ul.number-list li { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 
ul.number-list li a { 
 
    display: block; 
 
    width: 35px; 
 
    height: 35px; 
 
    -webkit-border-radius: 35px; 
 
    border-radius: 35px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    background: purple; 
 
    color: #fff; 
 
    cursor: pointer; 
 
}

<ul class="number-list"> 
 
    <li > 
 
    <a id="n1" onclick="ButtonSelected('n1')" role="button">1</a> 
 
    </li> 
 
    <li> 
 
    <a id="n2" onclick="ButtonSelected('n2')" role="button">11</a> 
 
    </li> 
 
    <li> 
 
    <a id="n3" onclick="ButtonSelected('n3')" role="button">31</a> 
 
    </li> 
 
    <li> 
 
    <a id="n4" onclick="ButtonSelected('n4')" role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a id="n5" onclick="ButtonSelected('n5')" role="button">16</a> 
 
    </li> 
 
    <li> 
 
    <a id="n6" onclick="ButtonSelected('n6')" role="button">6</a> 
 
    </li> 
 
    <li> 
 
    <a id="n7" onclick="ButtonSelected('n7')" role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a id="n8" onclick="ButtonSelected('n8')" role="button">21</a> 
 
    </li> 
 
    <li> 
 
    <a id="n9" onclick="ButtonSelected('n9')" role="button">2</a> 
 
    </li> 
 
    <li> 
 
    <a id="n10" onclick="ButtonSelected('n10')" role="button">44</a> 
 
    </li> 
 
</ul>

このコードは、赤のボタンを変更し、カウンタをインクリメントします。このコードでは、最大3つのボタンを選択できます。ボタンは選択解除できません。

Answer 2

var SelectCount = 0; 
 

 
function ButtonSelected(id) { 
 
    if (document.getElementById(id).style.backgroundColor == "red") { 
 
    SelectCount -= 1; 
 
    document.getElementById(id).style.backgroundColor = "purple"; 
 
    document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)"; 
 
    } else { 
 
    if (SelectCount < 3) { 
 
     document.getElementById(id).style.backgroundColor = "red"; 
 
     SelectCount += 1; 
 
     document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)"; 
 
    } else { 
 
     document.getElementById("checker").innerHTML = "You must unselect another button before selecting this one.<br />Maximum of three buttons selected reached."; 
 
    } 
 
    } 
 
}

ul.number-list li { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 

 
ul.number-list li a { 
 
    display: block; 
 
    width: 35px; 
 
    height: 35px; 
 
    -webkit-border-radius: 35px; 
 
    border-radius: 35px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
    background: purple; 
 
    color: #fff; 
 
    cursor: pointer; 
 
}

<ul class="number-list"> 
 
    <li> 
 
    <a id="n1" onclick="ButtonSelected('n1')" role="button">1</a> 
 
    </li> 
 
    <li> 
 
    <a id="n2" onclick="ButtonSelected('n2')" role="button">11</a> 
 
    </li> 
 
    <li> 
 
    <a id="n3" onclick="ButtonSelected('n3')" role="button">31</a> 
 
    </li> 
 
    <li> 
 
    <a id="n4" onclick="ButtonSelected('n4')" role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a id="n5" onclick="ButtonSelected('n5')" role="button">16</a> 
 
    </li> 
 
    <li> 
 
    <a id="n6" onclick="ButtonSelected('n6')" role="button">6</a> 
 
    </li> 
 
    <li> 
 
    <a id="n7" onclick="ButtonSelected('n7')" role="button">12</a> 
 
    </li> 
 
    <li> 
 
    <a id="n8" onclick="ButtonSelected('n8')" role="button">21</a> 
 
    </li> 
 
    <li> 
 
    <a id="n9" onclick="ButtonSelected('n9')" role="button">2</a> 
 
    </li> 
 
    <li> 
 
    <a id="n10" onclick="ButtonSelected('n10')" role="button">44</a> 
 
    </li> 
 
</ul> 
 
<div id="checker"> 
 
    Select up to three buttons. 
 
</div>

この答えは、ボタンの選択を解除できますし、同様に、ユーザからのフィードバックを提供します。私の他の答えと同様に、最大3つのボタンを一度に選択することができます。

Answer 3

ul.number-list li { 
list-style: none; 
display: inline-block; 
} 
ul.number-list li a { 
    display: block; 
    width: 35px; 
    height: 35px; 
    -webkit-border-radius: 35px; 
    border-radius: 35px; 
    line-height: 35px; 
    text-align: center; 
    background: purple; 
    color: #fff; 
    cursor: pointer; 
} 
ul.number-list li a.selected { 
    background: red; 
} 
<ul class="number-list"> 
    <li> 
    <a role="button">1</a> 
    </li> 
    <li> 
    <a role="button">11</a> 
    </li> 
    <li> 
    <a role="button">31</a> 
    </li> 
    <li> 
    <a role="button">12</a> 
    </li> 
    <li> 
    <a role="button">16</a> 
    </li> 
    <li> 
    <a role="button">6</a> 
    </li> 
    <li> 
    <a role="button">12</a> 
    </li> 
    <li> 
    <a role="button">21</a> 
    </li> 
    <li> 
    <a role="button">2</a> 
    </li> 
    <li> 
    <a role="button">44</a> 
    </li> 
</ul> 
<script> 
    window.addEventListener('load', function() { 

    document.querySelectorAll("ul.number-list li a").addEventListener('click', function() { 

     this.className = 'selected'; 
    }); 
    }); 
</script>