Add a class to element with matching data attribute value

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?

let section = document.querySelector('.section'); will only return the first matching element. — connexo
– connexo, Commented Aug 29, 2018 at 15:39
Yeah that's where I'm going wrong - what's needed to target all of them? — abbas_arezoo
– abbas_arezoo, Commented Aug 29, 2018 at 15:41
querySelectorAll, then in your forEach for the links you also need to loop the sections and compare the values — digital-pollution
– digital-pollution, Commented Aug 29, 2018 at 15:44

connexo · Accepted Answer · 2018-08-29 15:50:38Z

3

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

edited Aug 29, 2018 at 15:50

answered Aug 29, 2018 at 15:45

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

digital-pollution Over a year ago

was working on a similar answer but @connexo beat me to it. this is the answer you are looking for

Евгений Гужихин · Accepted Answer · 2018-08-29 15:56:26Z

0

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

answered Aug 29, 2018 at 15:56

Евгений Гужихин

615 bronze badges

Collectives™ on Stack Overflow

Add a class to element with matching data attribute value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related