Javascript querySelectorAll事件侦听器函数未正确迭代

我正在尝试在许多地图图标上创建eventListener（）函数。这些地图图标中的每一个都有一个对应的带有位置名称的span标记

这里的想法是，当用户将鼠标悬停在图标上时，它将触发一个事件监听器，该监听器将切换相应的span标记。总共有十个图标。在纸上很简单

我已经设法使用querySelectorAll进行了迭代，当每个图标悬停在上面时，事件侦听器就会触发。然而，我这里的问题是，实际的切换只适用于类列表中的第一个元素。因此，如果我们将第一个地图图标称为“A”，当我分别将鼠标悬停在“B”、“C”、“D”上时，它不会向我显示它们的span标记，而是会一直只为“A”触发切换。我想我在某个地方得到了一个迭代错误

HTML:

JS:

const-iconText=document.querySelector（'.map-icon-text'）；
函数addSpanClass（）{
添加（'map-icon-text-active'）；
}
函数removeSpanClass（）{
移除（'map-icon-text-active'）；
}
const mapIcon=document.queryselectoral（“.map icon”）；
对于（i=0；i

最后，我将.map图标文本活动CSS推到span标记中以设置动画，并使用eventListener切换此操作。它适用于“莫雷诺”分部，但不适用于其他地点

---

提前感谢您的帮助。

const iconText=document.querySelector（'.map icon text'）是全局的，因此只返回网页上的第一个匹配项

要使其发挥作用，您需要具体依赖事件目标：

function addSpanClass(event) {
  const iconText = event.target.querySelector('.map-icon-text');
  iconText.classList.add('map-icon-text-active');
}

---

const iconText=document.querySelector（'.map icon text'）是全局的，因此只返回网页上的第一个匹配项

要使其发挥作用，您需要具体依赖事件目标：

function addSpanClass(event) {
  const iconText = event.target.querySelector('.map-icon-text');
  iconText.classList.add('map-icon-text-active');
}

---

事件处理程序总是在更新

iconText

，即

const iconText=document.querySelector（'.map icon text'），因此它总是指向同一个元素。您期望的行为是什么？document.querySelectorAll（）不返回单个节点，它返回一个节点列表。因此，您必须迭代并向每个节点添加类。@smartdroid OP已经在迭代来自
querySelectorAll
@phil OP正在迭代addEventListener的结果。但不在问题所在的类列表中。事件处理程序总是更新
iconText
，即
const iconText=document.querySelector（'.map icon text'），因此它总是指向同一个元素。您期望的行为是什么？document.querySelectorAll（）不返回单个节点，它返回一个节点列表。因此，您必须迭代并向每个节点添加类。@smartdroid OP已经在迭代来自
querySelectorAll
@phil OP正在迭代addEventListener的结果。但问题不在课程列表中。非常感谢您的回答-这非常有效。我可以问一下，我已经重新编写了代码，但忘了将“event”添加为函数的参数，不知怎的，它仍然可以工作。怎么做？@DanShafi这很难说，可能有很多事情。。。从缓存开始？可能您的浏览器仍在运行旧版本的代码。否则，可能会在其他地方声明某个全局事件变量，并且可以从事件处理程序内部访问该变量。非常感谢您的回答-这非常有效。我可以问一下，我已经重新编写了代码，但忘了将“event”添加为函数的参数，不知怎的，它仍然可以工作。怎么做？@DanShafi这很难说，可能有很多事情。。。从缓存开始？可能您的浏览器仍在运行旧版本的代码。否则，可能会在其他地方声明某个全局事件变量，并且可以从事件处理程序内部访问该变量。
const iconText = document.querySelector('.map-icon-text');

function addSpanClass() {
  iconText.classList.add('map-icon-text-active');
}

function removeSpanClass() {
  iconText.classList.remove('map-icon-text-active');
}

const mapIcon = document.querySelectorAll('.map-icon');
for (i = 0; i < mapIcon.length; i++) {
  mapIcon[i].addEventListener('mouseenter', addSpanClass);
  mapIcon[i].addEventListener('mouseleave', removeSpanClass);
}

function addSpanClass(event) {
  const iconText = event.target.querySelector('.map-icon-text');
  iconText.classList.add('map-icon-text-active');
}