Question

我正在尝试覆盖库元素的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

}

谢谢

Answer 1

显示，隐藏，切换所有事件在此示例中均有效。

(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" />

Answer 2

感谢拉胡尔（Rahul）简单而优雅的回答。

(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" />

如何覆盖jquery show（）事件？

2 个答案: