我在屏幕上有一堆按钮，我将它们设置为单击时背景颜色变为红色。
可以通过这种方式单击多个按钮并变为红色。
我希望您一次只能选择
一个按钮，我的意思是当一个按钮被点击时，它将是唯一一个红色的，其他的将是它们的自然色。有点像单选按钮。
这是我的代码：
HTML：
//creating buttons for picking coins
function createButton(type, className, id, value, onclickFunction) {
//comments are for the coins buttons:
var button = document.createElement("input"); // input type is the simplest
button.type = type; //"button";
button.className = className; // 'Button';
button.id = id; // id;
button.value = value; // id;
button.onclick = onclickFunction; // ""
//adding the just created coin to screen
var divCoinPickScrn = document.getElementById("arrayStatus");
divCoinPickScrn.appendChild(button);
var space = document.createTextNode(" ");
divCoinPickScrn.appendChild(space);
}
$(document).ready(function() {
//creating 99 buttons with id same as their number:
for (var i = 2; i <= 100; i++) { // function createButton(type , className , id , value , onclickFunction)
createButton('button', 'button', i, i, "");
}
// listener for clicking
$('.Button').click(function(e) {
$(this).toggleClass("active");
e.preventDefault();
});
});.Button:active,
.active {
background-color: red;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- for displaying the array with every number as a BUTTON-->
<div id="arrayStatus">
</div>它工作的唯一问题是.Button大写字母.button。它应该是。
代码：
//creating buttons for picking coins
function createButton(type, className, id, value, onclickFunction) {
//comments are for the coins buttons:
var button = document.createElement("input"); // input type is the simplest
button.type = type; //"button";
button.className = className; // 'Button';
button.id = id; // id;
button.value = value; // id;
button.onclick = onclickFunction; // ""
//adding the just created coin to screen
var divCoinPickScrn = document.getElementById("arrayStatus");
divCoinPickScrn.appendChild(button);
var space = document.createTextNode(" ");
divCoinPickScrn.appendChild(space);
}
$(document).ready(function() {
//creating 99 buttons with id same as their number:
for (var i = 2; i <= 100; i++) { // function createButton(type , className , id , value , onclickFunction)
createButton('button', 'button', i, i, "");
}
// listener for clicking
$('.button').click(function(e) {
$('.button').removeClass("active");
$(this).toggleClass("active");
e.preventDefault();
});
});.button:active,
.active {
background-color: red;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrayStatus">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句