添加/删除类未按预期工作答案

【问题标题】：Add/remove classes not working as expected添加/删除类未按预期工作
【发布时间】：2015-10-03 00:20:55
【问题描述】：

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

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

当一个按钮被点击时，它们应该变成红色。

有人可以帮忙吗？

【问题讨论】：

请将您的代码添加到问题中；如果 Plunker 出现故障，那么这个问题将无法回答。

标签： jquery addclass removeclass

【解决方案1】：

要实现这一点，您可以在所有 button 元素上使用一个通用类：

<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

【讨论】：

【解决方案2】：

您可以尝试先从所有按钮中删除.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.

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：