爲什麼直播點擊功能只能在點擊時發生？

我有一個用戶點擊按鈕（.next_1）。爲什麼直播點擊功能只能在點擊時發生？

<a id="next_btn" class="next_1" href="#">Next</a>

用戶單擊按鈕後，應該將該類更改爲next_2。當用戶再次點擊該按鈕時，應該將其更改爲next_3。

$('.next_1').click(function() { 
    $('#next_btn').removeClass('next_1').addClass('next_2'); 
}); 

$('.next_2').live('click', function() { 
    $('#next_btn').removeClass('next_2').addClass('next_3'); 
});

目前，當用戶點擊該按鈕，它直接改變類next_3時候就應該將其更改爲next_2。爲什麼直播點擊功能只能在點擊時纔會自動運行？

來源

2011-09-22 zeckdude

.live（）在這種情況下與添加另一個點擊處理程序相同。我建議使用.toggle（）函數。

http://api.jquery.com/toggle-event/

$('#next_btn').toggle(function() { 
     $('#next_btn').removeClass('next_1').addClass('next_2'); 
}, function() { 
    $('#next_btn').removeClass('next_2').addClass('next_3'); 
}, function() { 
    $('#next_btn').removeClass('next_3').addClass('next_1'); // loops back to start 
});

來源

2011-09-22 05:38:29

工作就像一個魅力！非常感謝你！ – zeckdude

如果你想留在兩個單獨的事件處理程序由於其他原因，我會建議停止click事件的傳播並將兩者都改爲.live（）。基本上，如果要改變影響選擇器的事物，並希望這些更改反映在事件處理程序中，則必須解除綁定並重置新選擇器上的事件處理程序，或使用.live（）：

$('.next_1').live('click', function() { 
    $('#next_btn').removeClass('next_1').addClass('next_2'); 
    return(false); 
}); 

$('.next_2').live('click', function() { 
    $('#next_btn').removeClass('next_2').addClass('next_3'); 
    return(false); 
});

我認爲問題在於，您不要在第一次點擊時停止事件傳播，因此點擊會繼續冒泡到頂層。最終，它得到了jQuery的.live（）處理程序，並且現在您已將類更改爲「next_2」，它匹配.live（）處理程序，並且再次處理click。如果您在第一個點擊處理程序中停止事件傳播，那麼它在處理完畢後不會到達.live（）處理程序。我想你將不得不解除第一個點擊處理程序。它綁定到特定的DOM對象，而不是綁定到類，所以即使在您更改了類名後，它仍然會處理事件。或者，它可能會使它們成爲.live（）處理程序。

如果是我，我不會爲一個對象使用兩個單獨的事件處理程序。只需綁定一個事件處理程序，並根據狀態向其添加條件邏輯。

來源

2011-09-22 05:37:49 jfriend00

該OP是問爲什麼他的處理程序直接進入next_3。停止事件傳播不會解決問題。 –

@ sunjay03 - 你爲什麼這麼說？如果它們不停止第一個點擊處理程序上的事件傳播，則該事件將傳播到頂層，在該頂層，.live（）處理程序可以看到該事件，並看到它現在與它所設置的類相匹配，因此它也會觸發。兩者都發生在一次點擊。 – jfriend00

我同意這個觀點，但是如果你停止傳播，那麼現在的處理程序會在什麼時候執行呢？看到我的答案。 –

$('#next_btn').click(function(){ 

    if($(this).hasClass('.next_2')){ 
     $(this).removeClass('next_2').addClass('next_3'); 
    }else if($(this).hasClass('.next_1')){ 
     $(this).removeClass('next_1').addClass('next_2'); 
    } 

});

來源

2011-09-22 05:41:49 Michael

在各種各樣的利益，這裏是另一種方式來做到這一點，只要你想，可以很容易地去儘可能多的next_n水平，沒有更多的代碼：

$('#next_btn').click(function() { 
    var $this = $(this); 
    var num = $this.data("index") || 1; // get current state 
    if (num < 3) {      // only go up to next_3 
     $this.removeClass('next_' + num); // remove previous class 
     ++num;       // go up one 
     $this.addClass('next_' + num); // add the new class 
     $this.data("index", num);   // store new current state 
    } 
});

和jsFiddle顯示它：http://jsfiddle.net/jfriend00/jpdjY/

或更多比較ct形式：

$('#next_btn').click(function() { 
    var num = $(this).data("index") || 1; // get current state 
    if (num < 3) {      // only go up to next_3 
     $(this).removeClass('next_' + num++).addClass('next_' + num).data("index", num);   
    } 
});

來源

2011-09-22 06:12:45 jfriend00

爲什麼直播點擊功能只能在點擊時發生？

回答

相關問題