Javascript jquery插件函数多次重写执行函数

我创建了一个小的jQuery插件，当用户分别单击按钮

.show

和按钮

.hide

时，它会显示和隐藏一个div。我想将一个函数作为插件选项传递，以便对

onhide

执行一些特定的处理。但是，

onhide

函数的执行次数与单击显示和隐藏按钮的次数相同

这是你的电话号码

当您多次单击“显示/隐藏按钮”时，警报将显示相同的次数

我认为它应该只为隐藏按钮发出一次警报

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

}
);

---

这是因为您正在循环中实现onHide方法

移动此位：

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

     });

就在你的方法的结束括号之前，一切都很好

---

编辑：在这里摆弄：

这是因为您正在循环中实现onHide方法

移动此位：

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

     });

就在你的方法的结束括号之前，一切都很好

编辑：在这里拉小提琴：

只需替换即可

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

到

说明：

使用您的代码，每次用户单击

。显示
时，您会附加一个委派
。单击按钮<代码>一个
只执行一次


$.fn.showhide=函数（选项）{
var popup=这个；
默认选项={
onHide:function（）{}，
onShow:function（）{}
};
var Options=$.extend（{}，defaultOptions，Options）；
此.each（function（）{
$（this）.on（'click'，函数（e）{
var id=$（this.data（'id'）；
$（'#'+id）.show（）；
$（'.hide'）。解除绑定（'click'）。一个（'click'，函数（）{
var id=$（this.data（'id'）；
$（'#'+id）.hide（）；
if（Options.onHide.call（）==false）{
返回；
}
});
});
});
};
$（'.show'）.showhide({
onHide:function（）{
警惕（“隐藏”）；
}
});

显示
隐藏
这是id为123的div
只需更换

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

到

说明：

使用您的代码，每次用户单击
。显示
时，您会附加一个委派
。单击按钮<代码>一个
只执行一次


$.fn.showhide=函数（选项）{
var popup=这个；
默认选项={
onHide:function（）{}，
onShow:function（）{}
};
var Options=$.extend（{}，defaultOptions，Options）；
此.each（function（）{
$（this）.on（'click'，函数（e）{
var id=$（this.data（'id'）；
$（'#'+id）.show（）；
$（'.hide'）。解除绑定（'click'）。一个（'click'，函数（）{
var id=$（this.data（'id'）；
$（'#'+id）.hide（）；
if（Options.onHide.call（）==false）{
返回；
}
});
});
});
};
$（'.show'）.showhide({
onHide:function（）{
警惕（“隐藏”）；
}
});

显示
隐藏
这是id为123的div
这也有同样的问题！当您在show上单击三次时，您必须在ok按钮上单击三次！尝试我的解决方案…这实际上与我的解决方案相同！：p结果，而不是方式。人们可以从不同的解决方案中学到不同的东西。。（
unbind
，
one
例如，或者更好地理解jQuery插件的逻辑）…这也有同样的问题！当您在show上单击三次时，您必须在ok按钮上单击三次！尝试我的解决方案…这实际上与我的解决方案相同！：p结果，而不是方式。人们可以从不同的解决方案中学到不同的东西。。（
unbind
，
one
例如，或者更好地理解jQuery插件的逻辑）。。