點擊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

回答

相關問題