为什么直播点击功能只能在点击时发生？

我有一个用户点击按钮（.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

为什么直播点击功能只能在点击时发生？

回答

相关问题