Question

我有一列8个按钮，希望一次只切换一个按钮（黄色），其余按钮保持默认（绿色）。我花了点时间让功能在单击时执行。意味着没有颜色在改变。

我一直在使用此帖子How to select and change color of a button and revert to original when other button is clicked 作为我的参考，并帮助我理解了querySelectors和更改类，但是对于我自己一生，我无法理解为什么我的应用程序无法正常工作。 Console.log('test)会在调用for循环后立即触发，但如果置于onClick下面，则不会触发。

JS

for (button in buttons) {
    buttons[button].onclick = function() {
        console.log('test')
        var yellowButton = document.querySelectorAll(".yellow")[0];
        if (this.className == "green") {
            if (yellowButton) yellowButton.className = "green";
            this.className = "yellow";
        }
    }
}

HTML

            <button class="green">UPKEEP</button>
            <button class="green">DRAW</button>
            <button class="green">MAIN</button>
            <button class="green">COMBAT</button>
            <button class="green">MAIN</button>
            <button class="green">END TURN</button>
            <button class="green">CLEANUP</button>

CSS

button{
    width: 100%;
    padding: 10px 20px;
    margin: 3px;
}

.green{
    background-color: green;
}

.yellow {
    background-color: yellow;
}

我希望按钮的1/8为黄色。那就是被点击的按钮。

Answer 1

我设法使您的代码正常工作。 jsFiddle

确保正确定义buttons：

var buttons = document.querySelectorAll(".green");

Answer 2

您无需在黄色和绿色类之间切换，只需在单击时添加“突出显示”类并将其从先前单击的按钮中删除即可。

此突出显示类具有黄色背景样式，因此，当您单击按钮时，它将添加突出显示类和黄色背景。然后单击另一个按钮，从第一个按钮中删除突出显示类别，并将其应用于单击的那个类别。

 var buttons = document.querySelectorAll("button");
 
 for (button in buttons) {
    buttons[button].onclick = function() {
        console.log('test')
        buttons.forEach(function(btn){
          btn.classList.remove('highlight');
        })
        this.classList.add('highlight');
    }
}

button{
    width: 100%;
    padding: 10px 20px;
    margin: 3px;
}

.green{
    background-color: green;
}

.highlight {
    background-color: yellow;
}

<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>

Answer 3

我的问题出在我的html中，我不得不将script标签移动到主体的末尾以允许循环发生。感谢您的帮助！

更改一个按钮的背景颜色onClick并将以前单击的按钮恢复为默认背景（8个按钮）

3 个答案: