点击jQuery删除或添加额外的类jquery

我几乎试图通过单击div来切换类“orange”中添加的额外首选项。它增加了类没有任何问题，但我不能通过再次点击删除它。点击jQuery删除或添加额外的类jquery

$("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框它改变类=“隐藏橙”

正因为如此我也试过

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

要简单地剥离“隐藏橙”由“橙“并保持原来的状态，但它不起作用。

什么是在一个现存的类之后切换类的正确方法？

来源

2013-03-23 Dave

请不要删除您的问题内容。它应该留给未来的用户阅读。 – 2013-03-23 20:51:22

来源

2013-03-23 13:05:09 Shuping

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

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

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

的.toggleClass()通过叔平建议也是一个很好的解决方案，提供你不希望运行取决于div是否有orange类或没有任何其他脚本。

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

来源

2013-03-23 13:04:59 diggersworld

的原因，事件处理程序，将删除类是不行的，是它不会应用到元素。在绑定事件时，类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类。

来源

2013-03-23 13:17:53 Guffa

点击jQuery删除或添加额外的类jquery

回答

相关问题