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

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

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

document.querySelectorAll(".difficulty-button").forEach((gameMode) => {
  gameMode.addEventListener("click",function() {
    let linkColour = window.getComputedStyle(gameMode);
    document.querySelectorAll(".difficulty-button").forEach((item) => {
      item.style.backgroundColor = "green";
      item.style.color = "black";
    });
    gameMode.style.backgroundColor = linkColour.backgroundColor;
  });
});

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0;
  list-style: none;
}

button {
  Box-shadow: none;
  outline: none;
  width: 10em;
  height: 3.5em;
  transition: 0.25s linear;
  cursor: pointer;
  background-color: white;
}

li:nth-child(1) button:hover {
  background-color: rgb(51,165,50);
  color: white;
}

li:nth-child(2) button:hover {
  background-color: rgb(255,255,0);
}

li:nth-child(3) button:hover {
  background-color: rgb(204,50,50);
  color: white;
}

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

<ul>
  <li><button class="difficulty-button">Easy</button></li>
  <li><button class="difficulty-button">Medium</button></li>
  <li><button class="difficulty-button">Hard</button></li>
  <li><button class="difficulty-button">Insane</button></li>
</ul>

解决方法

之所以只能在第一次使用，是与您将颜色应用于按钮的方式以及如何应用新颜色有关。

为什么不起作用：

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

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

使其正常工作：如何在单击时交换CSS类

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

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.querySelectorAll(".difficulty-button").forEach((gameMode,btnNum) => {
    gameMode.addEventListener("click",function () {
        document.querySelectorAll(".difficulty-button").forEach((item) => {
            changeClass(item,0);
        });
        changeClass(this,(btnNum+1));
    });
});

function changeClass(btnElement,classRef){
    // 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-'+classRef);
}

ul {
    display: flex;
    justify-content: center;
}
ul li {
    padding: 0;
    list-style: none;
}
button {
    box-shadow: none;
    outline: none;
    width: 10em;
    height: 3.5em;
    transition: 0.25s linear;
    cursor: pointer;   
    background-color: white;
}

.colorbutton-0{
    background-color:green;
    color: black;
}
.colorbutton-1,li:nth-child(1) button:hover{
    background-color: rgb(51,50);
    color: white;
}
.colorbutton-2,li:nth-child(2) button:hover{
    background-color: rgb(255,255,0);
}
.colorbutton-3,li:nth-child(3) button:hover{
    background-color: rgb(204,50,50);
    color: white;
}
.colorbutton-4,li:nth-child(4) button:hover{
    background-color: black;
    color: white;
}

<ul>
  <li><button class="difficulty-button">Easy</button></li>
  <li><button class="difficulty-button">Medium</button></li>
  <li><button class="difficulty-button">Hard</button></li>
  <li><button class="difficulty-button">Insane</button></li>
</ul>

,

CSS就像您为button:hover使用的伪类一样，CSS还为active和visited提供了伪类。 你应该能够做到像下面这样，一旦选择了这将改变按钮的颜色，并且在选择新的按钮恢复它。

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