Add/remove 类未按预期工作

Question

我的页面上有一个按钮列表。我希望能够点击一个按钮，它会变成红色，而其他按钮保持相同的颜色。如果其他按钮为红色，我尝试使用 jQuery 的 removeClass() 方法。也就是说，只有一个按钮在单击时允许具有红色背景色。

这是 Plunker link：http://plnkr.co/edit/pgP05rCo5VNGdlq8h8aB?p=preview

单击按钮时，它们应该变为红色。

有人可以帮忙吗？

Answer 1

您可以尝试先从所有按钮中删除 .red，然后仅将其应用于已单击的按钮。

// Code goes here
$(document).ready(function () {
  $('.hey, .hey2, .hey3, .hey4').click(function(){
   $('.hey, .hey2, .hey3, .hey4').removeClass('red'); //Remove all classes red
   $(this).addClass('red'); // Add it only on one button.
  }); 
});

Demo here.

Answer 2

为此，您可以在所有 button 元素上使用通用 class：

<div style="text-align: center;">
    <p><input type="submit" class="hey" value="Button1" name="btnsubmit" id="answer" style="width: 200px;" /></p>
    <p><input type="submit" class="hey" value="Button2" name="btnsubmit" id="answer" style="width: 200px;" /></p>
    <p><input type="submit" class="hey" value="Button3" name="btnsubmit" id="answer" style="width: 200px;" /></p>
    <p><input type="submit" class="hey" value="Button4" name="btnsubmit" id="answer" style="width: 200px;" /></p>
</div>

从那里您可以附加一个 click 事件处理程序来满足所有这些元素。您只需要对所有这些调用 removeClass() 并在引发事件的实例上调用 addClass()，如下所示：

$('.hey').click(function(){
    $('.hey').removeClass('red');
    $(this).addClass('red');
});

Updated plunkr

Answer 3

我在您的代码中看到了两个错误 (script.js)：

if(!$('.hey2').hasClass('red')){
    $("hey2").removeClass('red');
  }

首先，你加一个“！”在 if 条件下，它不应该存在。而且，你忘记了“。”对于 hey2 的 class。这是更正，对我有用：

if($('.hey2').hasClass('red')){
    $(".hey2").removeClass('red');
  }

这只是针对您的特定问题的解决方案。实际上，我认为有更好的方法来解决您的问题。查看其他答案（来自 Rory McCrossan 和 mbinette）以获得更好的想法；-)

Add/remove 类未按预期工作

Add/remove classes not working as expected

jquery

addclass

removeclass

Add/remove 类 未按预期工作

Add/remove classes not working as expected

jquery

addclass

removeclass

Add/remove 类未按预期工作