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

尝试以下示例：

首先从所有按钮中删除buttonActive类，但单击的按钮除外
为点击的按钮切换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>

Answer 2

我不太了解。这样吗？

$("#buttonClicked").click(function(){
  $(this).addClass("buttonActive");
})
$("#change").click(function(){
  $("#buttonClicked").removeClass("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 id="buttonClicked">Button</button>
  <button id="change">Change</button>
</div>

Answer 3

向要单击的每个元素添加一个类。将该类用于click函数。单击该元素后，请从该元素中删除活动的类，并将其应用于所单击的元素。

在此示例中，当您单击元素之一时，其背景将变为红色。如果单击另一个元素，它将返回其原始颜色。

dict_keys(['copy', 'method', 'standardize'])

$( ".menu-item" ).click(function() {
    
    $(".menu-item").removeClass("buttonActive");
    $(this).addClass("buttonActive");

});

.item-1 {
  background-color: green;
}

.item-2 { 
 background-color: orange;
}

.item-3 {
 background-color: purple;
}

.menu p {
 color: #fff;
}

.buttonActive {
  background-color: red;
}

Answer 4

感谢所有回答的人。由于有了这些想法，我想到了从页面中选择所有按钮并删除buttonActive类

的方法。

$(:button).removeClass("buttonActive");
$(this).addClass("buttonActive");

使用jQuery更改类，但元素不会更改颜色？

4 个答案: