Question

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

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

我设法使用querySelectorAll进行了迭代，因为将鼠标悬停在每个图标上时会触发事件侦听器。但是，我的问题是实际的切换仅适用于类列表中的第一个元素。因此，如果我们将第一个地图图标称为“ 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');是全局的，因此仅返回网页上的第一个匹配项。

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

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

querySelectorAll事件侦听器功能未正确迭代

1 个答案: