如何使按钮的具体数量可以选择，选择变更后的的颜色选定

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>

我在新的JavaScript，我需要帮助，我会如果sombody帮助感激不尽！ 在这种情况下，我有一个按钮列表，我想限制选择按钮的数量，如6个按钮。每个按钮可以选择只是一次，选择颜色后得到change.help我请写这个code.thank你

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>

此代码将更改按钮为红色，并增加计数器。在此代码中，可以选择最多三个按钮。按钮不能被取消选择。

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>

此答案允许取消选择一个按钮，并提供用户反馈以及。正如在我的其他答案中，一次最多可以选择三个按钮。

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>