javascript - 将类添加到具有匹配数据属性值的元素

Question

我想使用 vanilla JS 向共享相同数据属性值的元素添加一个类。该类在 mouseenter 上添加。

我当前的设置仅将鼠标悬停时的类应用于第一个元素，而忽略其余元素。

let section = document.querySelector('.section');
let links = document.querySelectorAll('.links a');
let triggerVal;
let linkedVal;

links.forEach(function(link, index) {
  link.addEventListener('mouseenter', function() {
    triggerVal = this.dataset.triggerValue;
    linkedVal = section.dataset.linkedValue;

    if (linkedVal === triggerVal) {
      section.classList.add('is-active');
    } else {
      section.classList.remove('is-active');
    }
  });
});

<ul class="links">
  <li>
    <a data-trigger-value="red" href="#">Red</a>
  </li>
  <li>
    <a data-trigger-value="yellow" href="#">Yellow</a>
  </li>
  <li>
    <a data-trigger-value="blue" href="#">Blue</a>
  </li>
</ul>

<div class="wrapper">
  <div class="section" data-linked-value="red">
    <h2>Red</h2>
  </div>
  <div class="section" data-linked-value="yellow">
    <h2>Yellow</h2>
  </div>
  <div class="section" data-linked-value="blue">
    <h2>Blue</h2>
  </div>
</div>

这是一个代码笔:https://codepen.io/abbasarezoo/pen/7378e190ed6ad117faca968b634520b0

我觉得这与 .section 元素有关，但我尝试了一些方法，但似乎没有任何东西能满足我的需要。

关于我需要做什么才能使其余元素正常工作，有什么建议吗？

Answer 1

你需要改变两件事:

首先，获取所有部分:

const section = document.querySelectorAll('.section');

然后，在您的处理程序中，您需要遍历 querySelectorAll() 返回的 NodeList:

    for (const section of sections) {
        linkedVal = section.dataset.linkedValue;

        if (linkedVal === triggerVal) {
            section.classList.add('is-active');
        } else {
            section.classList.remove('is-active');
        }   
    }

这是你的新 JS:

const sections = document.querySelectorAll('.section');
const links = document.querySelectorAll('.links a');
let triggerVal;
let linkedVal;

links.forEach(function(link, index){
  link.addEventListener('mouseenter', (e) => {
        triggerVal = e.target.dataset.triggerValue;
        for (const section of sections) {
            linkedVal = section.dataset.linkedValue;

            if (linkedVal === triggerVal) {
                section.classList.add('is-active');
            } else {
                section.classList.remove('is-active');
            }   
        }
    });
});