jquery打開和關閉類的點擊

Question

我想解決，點擊功能刪除類on並添加新的類off。當我再次點擊div時，我想再次添加類on並刪除沒有發生的類off。我不確定這是不是工作的原因。但如果警覺它的工作。 這是我的代碼。和Jsfiddle demo

$(".on").bind('click',function() { 
    $(this).removeClass('on').addClass('off'); 
    alert('Hello World'); 
}) 
$(".off").bind('click',function() { 
    $(this).removeclass('off').addClass('on'); 
    alert('Hello World'); 
}) 
​ 

Answer 1

$(".on")和匹配選擇的DOM目前$(".off")選擇元素。因此，如果您將元素的類從.on更改爲.off，那麼它將繼續觸發.on事件處理程序，因爲這是綁定到元素的元素。你可以使用事件委託，但我認爲.toggleClass()可能是對你更好的實現：

$(".on, .off").bind('click',function() { 
    $(this).toggleClass('on off'); 
    alert('Hello World'); 
}) 

這裏是一個演示：http://jsfiddle.net/LEvM4/1/

如果您需要知道哪些類是目前你可以檢查元素.hasClass()：

$(".on, .off").bind('click',function() { 
    $(this).toggleClass('on off'); 
    if ($(this).hasClass('on')) { 
     alert('Hello World'); 
    } else { 
     alert('Goodbye World'); 
    } 
}) 

這裏是一個演示：http://jsfiddle.net/LEvM4/2/

關於事件代表團的一句話。你也可以綁定到的是你要綁定到該元素的祖先元素，並委託事件處理程序，以後代元素：

$(document).delegate(".on", 'click', function() { 
    $(this).addClass('off').removeClass('on'); 
    alert('Goodbye World'); 
}).delegate(".off", 'click', function() { 
    $(this).addClass('on').removeClass('off'); 
    alert('Hello World'); 
}) 

這裏是一個演示：http://jsfiddle.net/LEvM4/3/

有不利的一面事件代表團認爲，當一個事件觸發時，需要更多的開銷。如果可能，通常最好嘗試直接綁定到元素。通常情況下，如果元素當前不存在於DOM中，但您想要綁定到元素的未來實例，則使用事件委託。

有些文檔爲雅：

• .on()：http://api.jquery.com/on
• .toggleClass()：http://api.jquery.com/toggleClass
• .hasClass()：http://api.jquery.com/hasClass
• .delegate()：http://api.jquery.com/delegate

Answer 2

如果您使用某種活動綁定，則代碼更容易編碼。考慮

$('.on').live('click', function() { 
    $(this).removeClass('on').addClass('off'); 
}); 
$('.off').live('click', function() { 
    $(this).removeClass('off').addClass('on'); 
}); 

Answer 3

你可以請檢查一下。

$(".on").live('click',function() { 
    $(this).removeClass('on').addClass('off'); 
}) 
$(".off").live('click',function() { 
    $(this).removeclass('off').addClass('on'); 
})