Jquery trigering事件

Question

所以我有HTML和jquery代码。当我第一次点击图像时（当它有类隐藏时）第一个jquery点击功能exectues，但是当我再次点击图像时它不会执行另一个。这是为什么？我将类从hide更改为show，因此它应该执行第二个。

$(document).ready(function(){

$( "#slide.hide" ).click(function() {
		$("#slide").attr("src","arrow-down-icon.png");
		$('#wrapper').slideUp(1000);
		$("#slide").removeClass("hide").addClass("show");
});

$( "#slide.show" ).click(function() {
		$("#slide").attr("src","arrow-up-icon.png");
		$('#wrapper').slideDown(1000);
		$("#slide").removeClass("show").addClass("hide");
});
  
});

<img src="arrow-up-icon.png" alt="up" height="42" width="42"  class="hide" id="slide">

<div id="wrapper">
	123
</div>

Answer 1

直接绑定不是一个连续的过程。它用于过滤匹配元素以附加事件处理程序。如果在绑定评估时它们不匹配，则不会附加处理程序。

你可以通过使用委托绑定来解决这个问题，委托绑定将评估来自子节点的冒泡事件，以查看逻辑是否应该处理。

$( "#slide" ).parent().on('click', '#slide.show', function(){
    //will execute if the child slide has the class show
}).on('click', '#slide.hide', function(){
    //will execute if the child slide has the class hide
});

或者简单地组合两个处理程序

$('#slide').on('click', function(){
    var $this = $(this);

    if ($this.hasClass('hide')) {
        //do stuff
    } else {
        //do stuff
    }
});