javascript - 如何遍历依赖于多个函数的索引？

Question

我正在使用两种类型的元素，.element和.summary. 两个类的索引是相互对应的，所以当用户在mouseover上发生事件时.element，应该在其对应的 中添加一个类.summary。同样，应该在 上删除相同的类mouseout。

换句话说，我希望.styling该类仅适用于鼠标悬停.summary时.element

在没有声明这么多变量的情况下，我想知道循环这些元素的最有效方法。

var abc = document.getElementsByClassName("element");
var xyz = document.getElementsByClassName("summary");

for (let i = 1; i < xyz.length; i++) {
  abc[i].addEventListener("mouseover", movein(i), false);
  abc[i].addEventListener("mouseout", moveout(i), false);
}

function movein(i) {
  xyz[i].classList.add("styling");
}

function moveout(i) {
  xyz[i].classList.remove("styling");
}

.element {
  cursor: pointer;
}

.styling {
  background: red;
}

<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>

<div class="summary">Summary 1</div>
<div class="summary">Summary 2</div>
<div class="summary">Summary 3</div>

据我所知，这些功能可以运行，但不能在mouseover.

标签： javascript

Answer 1

您可以这样做，而不必更新您的 html。我们以编程方式设置了一个属性，因此当我们将鼠标悬停在它上面时，我们可以获得它的索引。然后我们使用该索引来查找相关的摘要。请注意，您不会通过i事件侦听器传递 - 您可以根据下面的代码测试event.target并获取闪亮的新属性。event.target.dataset

这里的另一个好处是我们结合了事件侦听器逻辑，您可以看到它是有意义的。这个答案利用了您现有的结构，使用更少的代码并且易于理解。

var abc = document.getElementsByClassName("element");
var xyz = document.getElementsByClassName("summary");
for (let i = 0; i < xyz.length; i++) {
  abc[i].setAttribute('data-index', i)
  abc[i].addEventListener("mouseover", mousemove);
  abc[i].addEventListener("mouseout", mousemove);

}

function mousemove(event) {
  let element = xyz[event.target.dataset.index];
  if (event.type == 'mouseover') element.classList.add("styling");
  else element.classList.remove("styling");
}

.element {
  cursor: pointer;
}

.styling {
  background: red;
}

<div class="element">Element 1</div>
<div class="element">Element 2</div>
<div class="element">Element 3</div>

<div class="summary">Summary 1</div>
<div class="summary">Summary 2</div>
<div class="summary">Summary 3</div>