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

时间:2013-03-23 13:02:31

标签: javascript jquery class html click

我正在尝试通过单击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");
});

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

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

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

您需要检查它是否具有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/

答案 2 :(得分:0)

删除该类的事件处理程序不起作用的原因是它未应用于该元素。在绑定事件时,没有类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类。