Question

我将一些代码从悬停功能移到外部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

您有两个选择：

将this作为参数传递给hover_in：

通话看起来像是：hover_in(this);

函数定义如下：
```
function hover_in(that) {
    var hover_id = $(that).attr('id'); // not work
};
```
以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);    
    }
});

如何调用另一个函数$（'this'）关联悬停

4 个答案: