jquery 多次覆盖执行函数的插件函数

Question

我创建了一个小 jQuery 插件，当用户分别单击按钮 .show 和按钮 .hide 时，它会显示和隐藏 div。我想传递一个函数作为插件选项来为 onhide 做一些特定的处理。但是 onhide 函数执行的次数与单击显示和隐藏按钮的次数一样多。

这里是 jsfiddle.

当您多次点击 show/hide 按钮时，警报将显示相同的次数。

我认为它应该只针对隐藏按钮提醒一次。

$.fn.showhide = function(options){ 

    var popup = this;
          defaultOptions = {
                 onHide : function() { },
           onShow : function() { }
         };
      var Options = $.extend({},defaultOptions, options); 
          this.each(function() {         
       $(this).on('click',function(e){ 
         var id = $(this).data('id');
         $('#'+id).show();
         $('.hide').on('click',function(){
           var id = $(this).data('id');
           $('#'+id).hide();
           if (Options.onHide.call() === false) {
                    return;
              }

         });

          });
      });
}

$('.show').showhide({
 onHide :function() {
  alert('hide');
 }

}
);

Answer 1

这是因为您在循环中实现了您的 onHide 方法。

移动这个位：

$('.hide').on('click',function(){
       var id = $(this).data('id');
       $('#'+id).hide();
       if (Options.onHide.call() === false) {
                return;
          }

     });

就在你的方法的右括号之前，一切正常！

编辑：Fiddle 此处：https://jsfiddle.net/ka9gw09t/10/

Answer 2

只需更换

$('.hide').on('click',function(){

到

$('.hide').one('click',function(){

解释：

使用您的代码，每次用户单击 .show 时，您都会向该按钮附加一个委托 .click。 one 只会做一次。

$.fn.showhide = function(options){ 

  var popup = this;
  defaultOptions = {
    onHide : function() { },
    onShow : function() { }
  };
  var Options = $.extend({},defaultOptions, options); 
  this.each(function() {    
    $(this).on('click',function(e){ 
      var id = $(this).data('id');
      $('#'+id).show();
      $('.hide').unbind('click').one('click',function(){
        var id = $(this).data('id');
        $('#'+id).hide();
        if (Options.onHide.call() === false) {
          return;
        }

      });

    });
  });
};

$('.show').showhide({
  onHide :function() {
    alert('hide');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show" data-id="123">
Show 
</button>
<button class="hide" data-id="123">
 Hide
</button>
<div class="showhide" id="123" style="display:none;">
This is div with id 123
</div>

更新

我在 one 之前添加了 unbind('click') 以解除对旧听众的绑定。

jquery 多次覆盖执行函数的插件函数

jquery plugin function overriding execute function many times

html

javascript

jquery

jquery-plugins