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 回答