jquery - 如何调用另一个函数 $('this') 关联悬停

Question

我将一些代码从悬停函数移到外部 be hover_in()。
$(this)在功能hover_in()上它不起作用，如何解决它？
我应该如何更换$('this')才能使其工作？

$('.a').hover(function(){
    hover_in();
    // var hover_id = $(this).attr('id');
}, function(){});

function hover_in(){
    var hover_id = $(this).attr('id'); // not work
};

<div class='a' id="a1"></div>
<div class='a' id="a2"></div>
<div class='a' id="a3"></div>
...

Answer 1

如果您“解开”对您的函数的调用，它将正常工作：

$('.a').hover(hover_in, function() {});

原因是 jQuery 将this在调用给定处理程序时设置，但在您的原始版本中，您不会做任何事情来确保在hover_in调用它时将其值传递给您的函数。

如果您不希望事件处理程序做任何其他事情，那么将整个事情包装在一个匿名函数中没有任何优势 - 正如您所发现的，恰恰相反。

如果您想在处理程序中完成其他事情，您可以这样做：

$('.a').hover(function(ev) {
    hover_in.call(this, ev);   // omit 'ev' if it's not needed
    ...
}, ...);

显式调用hover_in正确的this值。

还要注意$(this).attr('id') === this.id- 后者更简单，效率更高。

此外，如果您不想将第二个参数传递给.hover，请.mousenter改用。更好的是：

$('.a').on('mouseenter', hover_in);

function hover_in(){
    var hover_id = this.id;
    ...
};

Answer 2

您有 2 个选项：

1. this作为参数传递给hover_in：

   电话看起来像：hover_in(this);

   函数定义如下所示：

   function hover_in(that) {
       var hover_id = $(that).attr('id'); // not work
   };
   

2. 以类似的方式调用它hover_in.call(this);

Answer 3

将值作为参数传递：

$('.a').hover(function(){
    var hover_id = $(this).attr('id');
    hover_in(hover_id);
}, function(){});

function hover_in(id){
    //use id here
};

Answer 4

请看一下http://jsfiddle.net/2dJAN/55/

$(document).ready(function(){
    $('.a').hover(function(){
         //var hover_id = $(this).attr('id');
         // alert(hover_id);
        hover_in($(this));
     });
    function hover_in(div){
        var hover_id = div.attr('id');
        alert(hover_id);    
    }
});