时间戳

首页 > 解决方案 > 使用 jQuery 更改类但元素不改变颜色？

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

问题描述

在我工作的时候，我正在自学 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;
}

标签： javascriptjqueryhtml

解决方案

试试这个例子：

  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>

推荐阅读