0

我非常想通过单击 div 来切换“橙色”类中添加的额外首选项。它添加了没有任何问题的类,但我无法通过再次单击来删除它。

$("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");
});

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

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

4

3 回答 3

3
$("div").click(function(){
   $(this).toggleClass("orange");
});
于 2013-03-23T13:05:09.170 回答
1

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

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

我将您的 div 分配给一个$div变量,所以我不会经常搜索它。

Shuping 建议的.toggleClass()也是一个很好的解决方案,前提是您不想运行任何其他脚本,具体取决于 是否div具有orange类。

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

于 2013-03-23T13:04:59.687 回答
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选择器没有做任何事情的原因是因为它会匹配<orange>div 内的标签,而不是具有两个类的 div。为了匹配,您将使用选择器div.hidden.orange,但是当事件被绑定时,它仍然不会匹配任何元素,因为orange稍后会添加该类。

于 2013-03-23T13:17:53.790 回答