Добавить класс к элементу с соответствующим значением атрибута данных - PullRequest
0 голосов
/ 29 августа 2018

Я хочу добавить класс к элементу, который использует то же значение атрибута данных, используя 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, но я попробовал несколько вещей, и, кажется, ничто не дает мне то, что мне нужно.

Какие-либо предложения относительно того, что мне нужно сделать, чтобы остальные элементы работали?

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Вам нужно использовать 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
        )
    );
  });
});
0 голосов
/ 29 августа 2018

Вам нужно изменить две вещи:

Сначала получите все разделы:

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');
            }   
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...