1

我有这个代码：

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设置超时。很直接。

我的问题很简单：当我mouseenter一个.hlp并快速切换到附近的.hlp时，第一个 .hlp 的startclose在我mouseleave 时被激活，但是当进入第二个.hlp时超时清除。

我正在考虑使其具有唯一性，并且由于我的 JS 不是我想称之为 AMAZING 的东西，因此我正在寻求建议以使此代码“更好”。

提前致谢。:)

4

1 回答 1

3

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

至

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);
  });
});
于 2013-09-05T19:03:05.090 回答