Javascript jQuery使mouseenter和mouse leave事件唯一

我有以下代码：

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会在我鼠标退出时被激活，但当进入第二个.hlp时超时清除

我在考虑让它具有唯一的可识别性，因为我的JS不是我想称之为神奇的东西，所以我想征求一些建议，使这段代码“更优秀”

---

提前感谢。：）

Kevin在评论中表达的想法是使用闭包将特定的计时器变量与每个元素关联起来

改变

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);
});

到

---

将timerid存储在每个元素上，而不是全局存储所有元素。这可以通过使用.each（）实现，也可以通过使用.database将id直接存储在元素上实现。您能给我一个例子吗？我的jQuery不够好，无法完全理解您的建议。@KevinB您打算回答吗？或者其他人应该这样做吗？如果用户至少不愿意尝试，我不会回答。@KevinB这里我想你的评论对于一个新的JS程序员来说还不够清楚。这就是我回答的原因。但我现在明白你的沉默了，我就是这么做的。感谢@dystroy帮助我适应stackoverflow的方式！：）

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);
  });
});