Question

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

以下是Plunker链接：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元素上使用公共类：

<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的课程。这是更正，它对我有用：

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

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

添加/删除不按预期工作的类

3 个答案: