jQuery $(this).next() 未按预期工作

Question

我正在尝试创建一个由悬停事件触发的简单下拉菜单。为了节省编写代码的时间，我想利用 $(this) 选择器，但当我尝试定位 $(this) 下一个“a”元素时，我不断遇到问题。有谁知道在仍然使用 $(this) 选择器的情况下编码的正确方法？

在下面的代码中，如果我将 $(this).next('a') 更改为 $('.base a') ，代码可以正常工作，但是每次我都必须编写相同的 jQuery 代码块我想每次使用不同的类选择器来使用此功能。

Jquery 代码:

var handlerIn = function() {
var t = setTimeout(function() {
        $(this).next('a') <==== Problem is here
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(this).data('timeout', t);   
} ;

var handlerOut = function() {
clearTimeout($(this).data('timeout'));
$(this).next('a') <==== Problem is here
  .removeClass('active')
  .next('div')
  .slideUp();

};

$('.base').hover(handlerIn, handlerOut); 

HTML 代码:

<div id="info" class="base">
<a href="#" id="info-link" title=""></a>
        <div id="expanded-info">
               <!-- Stuff here -->              
         </div>
</div>

所以我也尝试过，但没有运气......任何想法:

var handlerIn = function(elem) {
var t = setTimeout(function() {
        $(elem).next('a') 
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(elem).data('timeout', t);   
} ;

var handlerOut = function(elem) {
clearTimeout($(elem).data('timeout'));
$(elem).next('a') 
  .removeClass('active')
  .next('div')
  .slideUp();

};
$('.base').hover(handlerIn($(this)), handlerOut($(this)));

Answer 1

JavaScript 是函数作用域，而不是 block 作用域:

var handlerIn = function() {
    var self = this;
    var t = setTimeout(function() {
        $(self).next('a')
            .addClass('active')
            .next('div')
            .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
        }, 400);
    $(this).data('timeout', t);   
};