Question

我正在尝试通过单击div切换在“orange”类中添加的额外首选项。它添加了没有任何问题的类，但我无法通过再次单击删除它。

$("div.hidden").click(function(){
   $(this).addClass("orange");
});

$("div.orange").click(function(){
   $(this).removeClass("orange");
});


<div class="hidden"></div>

.hidden{
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:5px;
    margin-right:5px;
}

.orange {background-color:#F90;}

当我点击div框时，它会变为class =“hidden orange”

因此我也试过

$("div.hidden orange").click(function(){
   $(this).removeClass("orange");
});

简单地将“隐藏的橙色”从“橙色”中删除并保持原样，但它不起作用。

在现有课程之后切换课程的正确方法是什么？

Answer 1

$("div").click(function(){
   $(this).toggleClass("orange");
});

Answer 2

您需要检查它是否具有orange类并进行切换。

var $div = $('div.hidden');
if ($('div.hidden').hasClass('orange')) {
    $div.removeClass('orange');
}
else $div.addClass('orange');

我将你的div分配给$div变量，所以我不会经常搜索它。

Shuping建议的.toggleClass()也是一个很好的解决方案，根据div是否具有orange类，您不希望运行任何其他脚本。< / p>

addClass()：http://api.jquery.com/addClass/
hasClass()：http://api.jquery.com/hasClass/
removeClass()：http://api.jquery.com/removeClass/

Answer 3

删除该类的事件处理程序不起作用的原因是它未应用于该元素。在绑定事件时，没有类orange的元素，因此事件处理程序不会绑定到任何元素。

您可以使用委托，以便您可以在元素上处理该事件，尽管它尚不存在，但您仍然需要保持第一个事件不会一直触发，这意味着您必须引入像另一个类只是为了跟踪元素的状态。

如果在单事件处理程序中执行此操作，则可以使用类本身来跟踪状态：

$("div.hidden").click(function(){
  if ($(this).hasClass("orange")) {
    $(this).removeClass("orange");
  } else {
    $(this).addClass("orange");
  }
});

或者您可以使用同样的toggleClass方法：

$("div.hidden").click(function(){
  $(this).toggleClass("orange");
});

div.hidden orange选择器没有做任何事情的原因是因为它匹配div中的<orange>标记，而不是具有两个类的div。要匹配，您将使用选择器div.hidden.orange，但在绑定事件时仍然不匹配任何元素，因为稍后会添加orange类。

单击jQuery删除或添加额外的类

3 个答案: