时间戳

首页 > 解决方案 > 我如何覆盖 jquery show() 事件？

jquery - 我如何覆盖 jquery show() 事件？

问题描述

我正在尝试覆盖库元素的显示行为并将其替换为 slideDown。是否可以使用 jQuery 覆盖或修改单个选择器的预先存在的功能？

就像是

$(".library-class").onShow(function (event){
  $(event.target).slideDown();
});

我试过 on() 函数。这不显示警报

$('.library-class').on("show", function(event) {
    alert("working!");
});

这会覆盖所有选择器的 show()，但不会覆盖单个选择器：

jQuery.fn.show = function() {
// Your custom code

}

谢谢

标签： jquery

解决方案

谢谢拉胡尔的简单优雅的回答。

(function($) {
  $.each(['show', 'hide'], function(i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function() {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

$(document).ready(function() {
  $('#foo').on('show', function() {
    console.log('#foo is now visible');
  });

  $('#foo').on('hide', function() {
    console.log('#foo is hidden');
  });
  $("#togle").on("click", function() {
    $("#foo").toggle();
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">this is test the thunder</div>
<input type="button" id="togle" value="Toggle" />

推荐阅读