如何创建循环为列表中的每个项目添加 eventListener

Question

在这个问题上绞尽脑汁，但我确定这只是我对 js 的经验不足。

我有一个项目列表，我正在尝试为每个项目行创建一个 eventListener，因此当我将鼠标悬停在该行上时，会出现一些图标。图标应该在鼠标移出时再次隐藏。

我正在使用 setAttribute 更改鼠标悬停和鼠标移出事件中元素的不透明度。

我的问题是在循环运行以创建 eventListeners 之后，setAttribute 仅影响循环的最后一行 - 无论我将鼠标悬停在哪一行。

我这里有一个 JSFiddle，它向您展示了确切的行为（比我解释得更好）：https://jsfiddle.net/Finno/ds9q7zju/27/

注意：这是一个简化的示例，但表现出相同的行为。我的真实应用程序在下拉菜单中设置了格式的项目。

这是代码：

var total = 8;
var items;
var row;
var sort;
var trash;

for (var i = 0; i < total; i++) {
  items = items + '<div id="row' + i + '">';
  items = items + '<span class="hidden" id="sort' + i + '">SORT</span>';
  items = items + '<span id="content' + i + '">Some content</span>';
  items = items + '<span class="hidden" id="trash' + i + '">TRASH</span>';
  items = items + '</div><br>';
}
document.getElementById("queue").innerHTML = items;

for (var i = 0; i < total; i++) {
  row = 'row' + i;
  sort = 'sort' + i;
  trash = 'trash' + i;
  document.getElementById(row).addEventListener("mouseover", function() {
    document.getElementById(sort).setAttribute("style", "opacity:1 !important");
    document.getElementById(trash).setAttribute("style", "opacity:1 !important");
  });
  document.getElementById(row).addEventListener("mouseout", function() {
    document.getElementById(sort).setAttribute("style", "opacity:0 !important");
    document.getElementById(trash).setAttribute("style", "opacity:0 !important");
  });
}

Answer 1

您需要在每次迭代中重新创建变量，试试这个，

此外，您可以使用字符串插值代替 + 来连接字符串

var total = 8;
var items;

for (var i = 0; i < total; i++) {
  items = items + '<div id="row' + i + '">';
  items = items + '<span class="hidden" id="sort' + i + '">SORT</span>';
  items = items + '<span id="content' + i + '">Some content</span>';
  items = items + '<span class="hidden" id="trash' + i + '">TRASH</span>';
  items = items + '</div><br>';
}
document.getElementById("queue").innerHTML = items;

for (var i = 0; i < total; i++) {
  let row = 'row' + i;
  let sort = 'sort' + i;
  let trash = 'trash' + i;
  document.getElementById(row).addEventListener("mouseover", function() {
    document.getElementById(sort).setAttribute("style", "opacity:1 !important");
    document.getElementById(trash).setAttribute("style", "opacity:1 !important");
  });
  document.getElementById(row).addEventListener("mouseout", function() {
    document.getElementById(sort).setAttribute("style", "opacity:0 !important");
    document.getElementById(trash).setAttribute("style", "opacity:0 !important");
  });
}

如何创建循环为列表中的每个项目添加 eventListener

How to create loop to add eventListener for each item in a list

javascript

css

dom

addeventlistener