Question

我有一个按钮（<a class="gmButton"></a>）和一个<span id="gmToolTip"></span>，我希望span在鼠标移过相关链接时显示某些文字。

要显示的文本是一个名为toolTips的字符串数组。

gmButtons[i].addEventListener("mouseover", function(){
    clearTimeout(t);
    t = setTimeout(function() { 
        gmToolTip.textContent = toolTips[i];
    }, 500);
});
gmButtons[i].addEventListener("mouseout", function(){
    gmToolTip.textContent = null;
    clearTimeout(t);
});

当逐个应用于链接时，代码似乎按预期执行。在这样的循环中应用它时不起作用。我搞砸了什么？

这里是小提琴：http://jsfiddle.net/d5tpqt5h/1/

Answer 1

问题是在您已遍历所有元素后触发事件侦听器函数。这意味着当它们被调用时，i等于9（并且toolTips[9]未定义，因为数组中的最后一个元素的索引比其length小一个）。

一种选择是将逻辑包装在IIFE中，以便捕获i的当前值：

Updated Example

for (var i = 0; i < gmButtons.length; i++) {
  (function(i) {
    gmButtons[i].addEventListener("mouseover", function() {
      clearTimeout(t);
      t = setTimeout(function() {
        gmToolTip.textContent = toolTips[i];
      }, 500);
    });
    gmButtons[i].addEventListener("mouseout", function() {
      gmToolTip.textContent = null;
      clearTimeout(t);
    });
  })(i);
}

或者，您也可以使用.bind() method将i的当前值传递给函数：

Updated Example

for (var i = 0; i < gmButtons.length; i++) {
  gmButtons[i].addEventListener("mouseover", function(i) {
    clearTimeout(t);
    t = setTimeout(function() {
      gmToolTip.textContent = toolTips[i];
    }, 500);
  }.bind(this, i));
  gmButtons[i].addEventListener("mouseout", function() {
    gmToolTip.textContent = null;
    clearTimeout(t);
  });
}

Answer 2

将gmTooltip.textContent = null;更改为gmToolTip.textContent = null;

gmTool t ip to gmTool T ip

希望它有所帮助！

Answer 3

尝试使用innerHTML和闭包：

for (var i = 0; i < gmButtons.length; i++){
    (function(i) {
      gmButtons[i].addEventListener("mouseover", function(){
        clearTimeout(t);
        t = setTimeout(function() {
            gmToolTip.innerHTML = toolTips[i];
        }, 500);
    });
    gmButtons[i].addEventListener("mouseout", function(){
        gmTooltip.innerHTML = null;
        clearTimeout(t);
    });
    })(i);
}

Demo

在循环内部应用鼠标悬停事件侦听器

3 个答案: