Javascript 单击特定按钮时，如何将所有按钮的颜色重置为原始颜色并添加新的特定颜色？

我试图让我的按钮在点击时改变颜色。“简易”按钮变为绿色，中键变为黄色，硬键变为红色，疯狂键变为黑色。当我在第一次尝试中单击任何按钮时，它会工作，但是当我单击另一个按钮时，它会将所有按钮重置为白色，并将我单击的按钮更改为指定的颜色。现在，我的代码将其重置为默认值，并且不显示单击的按钮颜色

document.queryselectoral（“难度按钮”）.forEach（（游戏模式）=>{
gameMode.addEventListener（“单击”，函数（）{
让linkcolor=window.getComputedStyle（游戏模式）；
document.queryselectoral（“.diffusion button”）.forEach（（项目）=>{
item.style.backgroundColor=“绿色”；
item.style.color=“黑色”；
});
gameMode.style.backgroundColor=linkcolor.backgroundColor；
});
});
ul{
显示器：flex；
证明内容：中心；
}
ulli{
填充：0；
列表样式：无；
}
钮扣{
盒影：无；
大纲：无；
宽度：10em；
高度：3.5公分；
过渡：0.25s线性；
光标：指针；
背景色：白色；
}
li:n第n个子（1）按钮：悬停{
背景色：rgb（51165,50）；
颜色：白色；
}
li:n第n个子（2）按钮：悬停{
背景色：rgb（255，255，0）；
}
li:n第n个子（3）按钮：悬停{
背景色：rgb（204,50,50）；
颜色：白色；
}
li:n第n个子（4）按钮：悬停{
背景色：黑色；
颜色：白色；
}

轻松的
中等
硬的
疯狂的
就像您用于
按钮：hover
的伪类一样，CSS也为
活动的
和访问的
提供伪类。
您应该能够执行如下操作，一旦选择按钮，就会更改按钮的颜色，并在选择新按钮时将其还原

li:nth-child(4) button:active {
    background-color: black;
    color: white;
}

这只在第一次使用时起作用的原因是与您获得应用于按钮的颜色的方式以及如何应用新颜色有关

为什么不起作用：

您正在使用
getComputedStyle
获取按钮单击时的颜色。第一次单击时，将应用hover类，因此要使用的是您单击的那个类

但是，javascript直接使用内联样式将所有按钮更改为绿色。这些将覆盖正在应用的任何其他CSS。现在，每次单击时，所有按钮都设置为绿色，以便再次应用颜色

开始工作：如何在单击时交换CSS类

您可以将颜色硬编码到JS函数中，并使用if来检查它是哪个按钮。但更灵活的方法是再次使用类

1。设置CSS类。我们已经为你想要的颜色设置了规则，所以如果我们给你一个类名，我们可以在js中使用它们，例如

.colorbutton-1,   /* give the existing 1st button CSS a class called "colorbutton-1" */
li:nth-child(1) button:hover{
    background-color: rgb(51, 165, 50);
    color: white;
}

对每个按钮执行此操作，并为默认未选择状态设置一个按钮，例如

.colorbutton-0{
    background-color:green;
    color: black;
}

注意所有类都以相同的名称开始
colorbutton
-这很重要！这就是我们稍后将在js中使用的内容

2。编写一个函数，根据单击的内容交换按钮上的类。我们将传入该按钮以及该按钮的编号（即1,2,3,4）

在函数中，我们删除所有以
colorbutton
开头的类，然后添加新类-这是由
colorbutton-
和按钮编号组成的。如果要应用未选择的样式，则使用0

function swapClass(btnElement, btnNum){
    // remove all existing classes  starting with "colorbutton"
    btnElement.classList.forEach(className => {
        if (className.startsWith('colorbutton')) 
            btnElement.classList.remove(className);
    });
     // now add the new class
    btnElement.classList.add('colorbutton-'+ btnNum);
}

3。添加单击侦听器以侦听单击并根据单击的按钮更改类

// add a "counter" in forEach that passes the index of the element being processed, e.g. 0,1,2 etc
document.querySelectorAll(".difficulty-button").forEach((gameMode, btnNum) => {
    // add the click listener for the current button
    gameMode.addEventListener("click", function () {
        // on a click, remove all 'colorbutton' classes and set them to the default
        document.querySelectorAll(".difficulty-button").forEach((item) => {
            swapClass(item, 0);
        });
        // add the class for this button, passing in the class number to generate the classname
        swapClass(this, (btnNum+1));
    });
});

工作示例将这一切放在一起：


document.queryselectoral（“难度按钮”）.forEach（（游戏模式，btnNum）=>{
gameMode.addEventListener（“单击”），函数（）{
document.queryselectoral（“.diffusion button”）.forEach（（项目）=>{
变更类别（项目，0）；
});
变更类别（本（btnNum+1））；
});
});
函数变更类（btnElement，classRef）{
//删除以“colorbutton”开头的所有现有类
btnElement.classList.forEach（className=>{
if（className.startsWith（'colorbutton'））
btnElement.classList.remove（className）；
});
//现在添加新类
添加（'colorbutton-'+classRef）；
}
ul{
显示器：flex；
证明内容：中心；
}
ulli{
填充：0；
列表样式：无；
}
钮扣{
盒影：无；
大纲：无；
宽度：10em；
高度：3.5公分；
过渡：0.25s线性；
光标：指针；
背景色：白色；
}
.colorbutton-0{
背景颜色：绿色；
颜色：黑色；
}
.colorbutton-1，
li:n第n个子（1）按钮：悬停{
背景色：rgb（51165,50）；
颜色：白色；
}
.colorbutton-2，
li:n第n个子（2）按钮：悬停{
背景色：rgb（255，255，0）；
}
.colorbutton-3，
li:n第n个子（3）按钮：悬停{
背景色：rgb（204,50,50）；
颜色：白色；
}
.colorbutton-4，
li:n第n个子（4）按钮：悬停{
背景色：黑色；
颜色：白色；
}

轻松的
中等
硬的
疯狂的
当选择一个按钮时，您希望所有其他按钮都是绿色的吗？不，我希望它是白色的，但有人编辑了我的帖子