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

Per @ 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。

Answer 2

如果您这样做，this将继续执行：

$('a').hover(showBox,hideBox);

编辑：要解决注释中的问题，这将适用于您指定为事件处理程序的任何函数。无论是匿名函数还是命名函数都无关紧要。

此：

$('a').click(function() { 
    alert( this.tagName ); 
});

...与：

相同

function alertMe() {
    alert( this.tagName );
}

$('a').click( alertMe );

......或者这个：

function alertMe() {
    alert( this.tagName );
}

$('a').bind('click', alertMe );

Answer 3

在Javascript中，您可以使用call()或apply()执行某项功能，并为其明确指定this：

$('a').hover(
    function()
    {
        showBox.call(this);
    },
    function()
    {
        hideBox.call(this);
    }
);

赋予call()的第一个参数指定this将在函数中引用的对象。任何其他参数都用作函数调用中的参数。

Answer 4

您需要将代码修改为以下内容：

function showBox(elem)
{
    elem.parents('.container').find('.box').show();
};

function hideBox(elem)
{
    elem.parents('.container').find('.box').hide();
};

$('a').hover(
    function()
    {
        var $this = $(this);

        showBox($this);
    },
    function()
    {
        var $this = $(this);

        hideBox($this);
    }
);

Answer 5

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

Answer 6

将参数添加到showBox和hideBox，以便他们可以接受该元素，然后拨打showBox($(this))和hideBox($(this))。

将$（this）传递给函数

6 个答案: