querySelectorAll 事件偵聽器 function 無法正確迭代

Question

我正在嘗試在許多 map 圖標上創建一個 eventListener() function。 這些 map 圖標中的每一個都有一個對應的跨度標簽及其位置名稱。

這里的想法是，當用戶將鼠標懸停在圖標上時，它將觸發一個事件偵聽器，該事件偵聽器將切換相應的 span 標簽。 總共有十個圖標。 在紙上很簡單。

我已經設法使用 querySelectorAll 進行迭代，因為當每個圖標懸停在上面時，事件偵聽器就會觸發。 但是，我的問題是實際切換僅適用於 class 列表中的第一個元素。 因此，如果我們將第一個 map 圖標稱為“A”，當我 hover 分別在“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'); 是全局的，所以只返回 web 頁面上的第一個匹配項。

要使其正常工作，您需要特別依賴事件目標：

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