Question

$('#element').children('ul').children('li').children('a').hover(function(){     
    var _this = $(this);
    _this.siblings('div').show();
},function(){
    _this.siblings('div').hide();
})

它的工作原理应该如此，显示div。但它不会隐藏它。我想_这不是在callbacl函数中定义的。我如何在该函数内传递它而不必再从DOM中选择它？我认为这是一个非常基本的javascript问题，我无法弄明白。

Answer 1

在您的示例中，您将两个函数作为参数传递给.hover（）方法，因此您在函数内声明的任何变量仅在该函数的范围中可用。因此，如果您需要在第二个函数中使用_this变量，则需要再次声明它。

但是在你的情况下，中间变量不是必需的，你可以完全省略它：

$('#element').children('ul').children('li').children('a').hover(function(){ 
    $(this).siblings('div').show();
} ,function(){
    $(this).siblings('div').hide();
})

Answer 2

在两个函数中都需要这个：

var _this = $(this);

但更好的方法就是这样：

$('#element > ul > li > a').hover(function(e){ 
    $(this).siblings('div').toggle( e.type === 'mouseenter' );
});

...或者如果你希望避免多次调用.siblings()，你可以这样做：

$('#element > ul > li > a').each(function() {
    var $th = $(this);
    var sibs = $th.siblings('div');
    $th.hover(function(e){ 
        sibs.toggle( e.type === 'mouseenter' );
    });
});

仅供参考：执行$(this)时，您没有从DOM中选择任何内容。 this只是对调用处理程序时为您设置的元素的直接引用。

Answer 3

为什么不使用mouseenter和mouseleave？

或者也许：

$('#element').children('ul').children('li').children('a').hover(function(){ 

    var _this = $(this);
    _this.siblings('div').show();

},function(){

    var _this = $(this);
    _this.siblings('div').hide();
})

如果我没有在第一个函数声明中出错，那么_this是“私有的”...

Answer 4

如果#element中的所有链接都位于li内，您可以使用$('#element > a').hover()调用它们。

试试这个：

$('#element > a').mouseover(function () { $(this).siblings('div').show(); }).mouseout(function () { $(this).siblings('div').hide(); });

jQuery悬停功能的问题

4 个答案: