querySelectorAll 事件侦听器 function 无法正确迭代

Question

I am trying to create an eventListener() function on a number of map icons. Each of these map icons have a corresponding span tag with the name of its location.

The idea here is that when a user hovers over an icon, it will trigger an event listener that will toggle the corresponding span tag. There are ten icons in total. Simple enough on paper.

I have managed to iterate using querySelectorAll in that when each icon is hovered over, the event listener fires. However, my issue here is that the actual toggle only works for the first element in the class list. So, if we call the first map icon 'A', when I hover over 'B', 'C', 'D' respectively, instead of showing me their span tags, it keeps firing the toggle for 'A' only. I think I am getting an iteration wrong here somewhere.

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

Ultimately, I am pushing the.map-icon-text-active CSS into the span tag to animate and using the eventListener to toggle this action. It works for the div 'moreno' but fails to work for the other locations.

Thank you for your help in advance.

Answer 1

The const iconText = document.querySelector('.map-icon-text'); is global, so only return the first match on the web page.

For it to work, you want to rely on the event target specificially:

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