Question

我想使用香草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>

这是一个Codepen：https://codepen.io/abbasarezoo/pen/7378e190ed6ad117faca968b634520b0

我感觉这与.section元素有关，但是我尝试了几件事，但似乎没有任何东西可以满足我的需求。

关于我需要做什么才能使其余元素正常工作的任何建议？

Answer 1

您需要更改两件事：

首先，获得所有部分：

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

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

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

Answer 2

您需要为document.querySelectorAll使用sections，然后为forEach使用。在这种情况下，请使用toggle而不是add/remove。 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

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

links.forEach(function(link, index) {
  link.addEventListener('mouseenter', function() {
    triggerVal = this.dataset.triggerValue;
    sections.forEach(
        section => section.classList.toggle(
            'is-active',
            section.dataset.linkedValue === triggerValue
        )
    );
  });
});

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

2 个答案: