Question

我有这段代码：

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 时， startclose <当我 mouseleave 时，/ strong>从第一个 .hlp 被激活，但是当输入第二个 .hlp 时，超时会清除。

我正在考虑使其具有独特的可识别性，因为我的JS不是我想称之为令人惊讶的，我要求建议使这段代码“更好”。

提前致谢。：）

Answer 1

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

jQuery使mouseenter和mouse leave事件独一无二

1 个答案: