Jquery 触发事件

Question

所以我有 HTML 和 jquery 代码。当我第一次点击图片时（当它有 class 隐藏时）首先 jquery 点击功能执行，但是当我再次点击图片时它不会执行其他的。这是为什么？我将 class 从隐藏更改为显示，因此它应该执行第二个。

$(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
    }
});

Jquery 触发事件

Jquery trigering events

html

javascript

jquery

triggers

click