javascript - jQuery使Mouseenter和Mouse离开事件变得唯一

我有以下代码：

jQuery(window).one('load',function() {
    var startopen;
    var startclose;
    var delaytime = 350;
    var togglespeed = 'fast';
    jQuery('.hlp').mouseenter(function() {
        var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
        if( typeof startclose !== undefined) {
            clearTimeout(startclose);
        }
        startopen = setTimeout(function(){
            jQuery(v).fadeIn(togglespeed);
        }, delaytime);
    }).mouseleave(function(){
        var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
        if( typeof startopen !== undefined) {
            clearTimeout(startopen);
        }
        startclose = setTimeout(function(){
            jQuery(v).fadeOut(togglespeed);
        }, delaytime);
    });
});

当鼠标输入.hlp时，将显示该特定父级的.help，但在检查是否已定义startclose变量之前不会显示。当鼠标离开时，该函数检查是否已定义startopen，然后为startclose设置超时。非常简单。

我的问题很简单：当我用鼠标输入一个.hlp并快速切换到附近的.hlp时，当我离开鼠标时，从第一个.hlp开始的startclose被激活，但是当进入第二个.hlp时超时将清除。

我当时正在考虑使其具有唯一的可识别性，并且由于我的JS不是我想称呼的AMAZING，因此我正在寻求一些建议以使此代码“更好”。

提前致谢。 :)

最佳答案

凯文在评论中表示的想法是使用闭包将特定的计时器变量与每个元素相关联。

更改

jQuery('.hlp').mouseenter(function() {
    var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
    if( typeof startclose !== undefined) {
        clearTimeout(startclose);
    }
    startopen = setTimeout(function(){
        jQuery(v).fadeIn(togglespeed);
    }, delaytime);
}).mouseleave(function(){
    var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
    if( typeof startopen !== undefined) {
        clearTimeout(startopen);
    }
    startclose = setTimeout(function(){
        jQuery(v).fadeOut(togglespeed);
    }, delaytime);
});

至

jQuery('.hlp').each(function(){
  var startopen, startclose;
  jQuery(this).mouseenter(function() {
    var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
    if( typeof startclose !== undefined) {
        clearTimeout(startclose);
    }
    startopen = setTimeout(function(){
        jQuery(v).fadeIn(togglespeed);
    }, delaytime);
  }).mouseleave(function(){
    var v = "#" + jQuery(this).parent().parent().attr("id") + " .help";
    if( typeof startopen !== undefined) {
        clearTimeout(startopen);
    }
    startclose = setTimeout(function(){
        jQuery(v).fadeOut(togglespeed);
    }, delaytime);
  });
});