在兩個div之間點擊時交換類別

我在下面有下面的代碼。當我運行應用程序，然後點擊「欄」時，顯示消息The not 'current' div has been clicked。然後，如果我點擊「foo」，則不顯示消息。我預計會顯示這條消息，因爲我已經在兩個divs之間交換了類current。在兩個div之間點擊時交換類別

<div class="current">foo</div> 
<div>bar</div> 

$('document').ready(function(){ 
    $('div').not('.current').on('click', function(){ 
     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

來源

2013-05-10 ziiweb

正確加載文檔後，您爲所有沒有「current」類的元素分配了一個click監聽器。因此，第一個具有該類的div不在集合中，並且永遠不會擁有該收聽者。 – 2013-05-10 11:38:43

@PetrČihula好的，謝謝，我不知道我是在「分配」，有沒有辦法做到這一點，而沒有「assinging」？ – ziiweb 2013-05-10 12:24:34

如果通過「不分配」您的意思是「每次更改類時不重複分配」，那麼對每個「div：not（.current）」使用'.live（）'（jQuery <1.7） .on（）'（> = 1.7）用相同的子選擇器應用於文檔對象。請參閱http://jsfiddle.net/MMjx4/ – 2013-05-13 13:11:38

在DOM準備好了，您已經分配點擊事件僅適用於不具有類current的div。因此，代碼不起作用。您需要點擊事件分配給所有div的，檢查裏面的類，如：

$('div').on('click', function (e) { 
    if (e.target.className === 'current') return; 
    console.log("The not 'current' div has been clicked.") 
    var $aux = $(this); 
    $('div').removeClass('current'); 
    $aux.addClass('current'); 
});

來源

2013-05-10 11:44:24

好的，謝謝，有什麼辦法可以做到我想要的而不會觸發事件處理程序？ – ziiweb 2013-05-10 12:50:27

我不認爲這是不可能的，沒有任何事件處理程序。 – 2013-05-10 13:09:03

您只將click事件添加到「not current」元素，並且當您切換類時，其中一個元素仍然沒有單擊事件。相反，你可以這樣做：

$('document').ready(function(){ 
    $('div').on('click', function(){ 
     if ($(this).hasClass("current")){ 
      return; 
     } 

     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

來源

2013-05-10 11:37:39 Strille

使用此代碼：

$('document').ready(function(){ 
    $('div').on('click', function(){ 
     if($(this).hasClass('current')) return; 

     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

檢查回調內部類）

的jsfiddle這裏：http://jsfiddle.net/5hFv4/

來源

2013-05-10 11:37:57

我想你想要的是一個div點擊它不具有.current類將獲得click事件並交換.current類，因爲您正在使用jQuery操作dom並交換類，它沒有得到應用的新類，它需要在頁面準備好時加載的元素，因此您可以將事件委託給document以及你會得到你想要的東西：

$(document).on('click', 'div:not(.current)', function() { 
    alert("The not 'current' div has been clicked."); 
    var aux = $(this); 
    $('div').removeClass('current'); 
    aux.addClass('current'); 
});

Tryout this fiddle

來源

2013-05-10 11:55:32 Jai

好的，謝謝，有什麼辦法可以做到我想要的而不會觸發事件處理程序？ – ziiweb 2013-05-10 13:02:09

在兩個div之間點擊時交換類別

回答

相關問題