querySelectorAll 事件监听器函数没有正确迭代

Question

我正在尝试在多个地图图标上创建 eventListener() 函数。这些地图图标中的每一个都有一个相应的带有其位置名称的 span 标签。

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

我已经设法使用 querySelectorAll 进行迭代，因为当每个图标悬停在上方时，事件侦听器会触发。但是，我这里的问题是实际切换仅适用于 class 列表中的第一个元素。所以，如果我们调用第一个地图图标 'A'，当我分别将鼠标悬停在 'B'、'C'、'D' 上时，而不是向我显示 他们的 跨度标签，它只为 'A' 触发切换。我想我在某处迭代错误。

HTML:

<div class="map-icon moreno">
    <span class="map-icon-text">Moreno Valley, CA</span>
</div>

<div class="map-icon dallas">
    <span class="map-icon-text">Dallas, TX</span>
</div>

<div class="map-icon cicero">
    <span class="map-icon-text">Cicero, IL</span>
</div>

<div class="map-icon chattanooga">
    <span class="map-icon-text">Chattanooga, TN</span>
</div>

CSS:

.map-icon-text {
    transform: scale(0);
    transition: all 0.2s ease-in-out; }

.map-icon-text-active {
    transform: scale(1);
    transition: all 0.2s ease-in-out; }

JS:

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

最终，我将 .map-icon-text-active CSS 推送到 span 标签中以进行动画处理，并使用 eventListener 来切换此操作。它适用于 div 'moreno' 但不适用于其他位置。

提前感谢您的帮助。

Answer 1

const iconText = document.querySelector('.map-icon-text'); 是全局的，所以只有 return 网页上的第一个匹配项。

要使其正常工作，您需要特别依赖事件目标：

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

querySelectorAll 事件监听器函数没有正确迭代

querySelectorAll Event Listener function does not iterate correctly

javascript

dom

loops

function

dom-events