javascript - 使用 jQuery 更改类但元素不改变颜色？

Question

在工作期间，我正在自学 HTML、CSS 和 JavaScript，一位面试官来找我，建议我学习 jQuery，因为它是现在的“标准”。

所以我决定这样做，并开始将我自己的网页项目迁移到我将来要制作的游戏，到 jQuery，到目前为止它很容易理解，并让我压缩了 150 行左右javaScript 进入 70(或多或少)。

现在我尝试使用 jQuery 在单击时向按钮添加一个类，为此我正在使用:

$(this).addClass("buttonActive");

在 CSS 中，按钮是:

.menu .buttonActive {
background-color: #222629;
}

当单击按钮时，按钮确实会改变颜色，这很完美，但我想在单击另一个按钮时将颜色更改为原始颜色，但它不起作用。为此，我正在使用:

$("#buttonClicked").removeClass("buttonActive");

我还尝试在删除buttonActive时添加另一个类，但它不起作用。

$("#buttonClicked").removeClass("buttonActive").addClass("buttonNotActive");

.buttonNotActive {
background-color: #10394E;
}

Answer 1

试试这个例子:

1. 首先从除单击的按钮之外的所有按钮中删除 buttonActive 类
2. 切换所单击按钮的buttonActive 类

$(".myButton").click(function() {
  $(".myButton").not($(this)).removeClass('buttonActive');
  $(this).toggleClass("buttonActive");
})

.menu .buttonActive {
background-color: #222629;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>
  <button class="myButton">My button</button>

</div>