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

Question

I want to add a class to an element that shares the same data attribute value using vanilla JS. The class is added on mouseenter .

My current setup only applies the class on hover to the first element and ignores the rest.

 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> 

Here's a Codepen: https://codepen.io/abbasarezoo/pen/7378e190ed6ad117faca968b634520b0

I've got a feeling it's to do with the .section element but I've tried a few things and nothing seems to give me what I need.

Any suggestions as to what I need to do to get the rest of the elements working?

Answer 1

You need to change two things:

First, get all sections:

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

Then, inside your handler, you need to iterate over the NodeList returned by querySelectorAll() :

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

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

This is your new 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

You need to use document.querySelectorAll for sections and then forEach . And use toggle instead of add/remove for this case. 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
        )
    );
  });
});