javascript - 将 $(this) 传递给函数

Question

我正在尝试构建一个媒体播放列表，可以提前播放片尾字幕、播放视频并在拇指悬停、视频结束和下一个/上一个单击时更改标题。所以我需要编写一些可以一起调用的函数。像这样:

    function showBox()
    {
        $(this).parents('.container').find('.box').show();
    };
    
    function hideBox()
    {
        $(this).parents('.container').find('.box').hide();
    };
    
    $('a').hover(
        function()
        {
            showBox();
        },
        function()
        {
            hideBox();
        }
    );

问题是 $(this) 没有继承 .hover 中的函数。我该怎么做？

Answer 1

根据 @patrickdw 的回答，jQuery 将事件回调的范围设置为触发事件的 DOM 元素。例如，请参阅 click() 文档中的 eventObject 参数。处理程序。

当您想要创建 jQuery 插件以便您可以在 jQuery 对象上调用您自己的自定义方法并将 jQuery 对象设置为 this 时，我的原始答案(如下)很有用> 执行期间。然而，这不是原始问题的正确且简单的答案。

// Within a plug-in, `this` is already a jQuery object, not DOM reference
$.fn.showBox = function(){ this.parents('.container').find('.box').show(); };
$.fn.hideBox = function(){ this.parents('.container').find('.box').hide(); };
$('a').hover(
  function(){ $(this).showBox() },
  function(){ $(this).hideBox() }
);

编辑:或者，如果(按照建议)您只想向 ~global jQuery 方法命名空间添加一个名称:

$.fn.myBox = function(cmd){
  this.closest('.container').find('.box')[cmd]();
};

$('a').hover(
  function(){ $(this).myBox('show') },
  function(){ $(this).myBox('hide') }
);

或者更一般地说:

$.fn.myBox = function(cmd){
  switch(cmd){
    case 'foo':
      ...
    break;
    case 'bar':
      ...
    break;
  }
  return this;
};

有关详细信息，请参阅jQuery Plugin Authoring Guide .