Как присвоить один и тот же class элементам с одинаковым значением data?

Question

[Oleh Lantukh]

Доброе время суток.
Подскажите пожалуйста, есть два списка:

<ul>
  <li data-item="1">Пункт 1</li>
  <li data-item="2">Пункт 2</li>
  <li data-item="3">Пункт 3</li>
</ul>

<ul>
  <li data-item="1">Пункт 1</li>
  <li data-item="2" class="active">Пункт 2</li>
  <li data-item="3">Пункт 3</li>
</ul>

Как сделать так, чтобы автоматом добавился class="active" к элементу первого списка с таким же data-атрибутом как у активного элемента списка №2?

Answer 1

[nickerlan]

"Автоматом" не получится - нужен как минимум обработчик события, в какой момент осуществлять такую проверку.
Не очень просто сценарий понятен - как там active появился. Если при клике, то имеет смысл туда повесить что-то в духе

document.querySelectorAll('[data-item='+e.target.getAttribute('data-item')+']')
      .forEach(liActive=> 
        {liActive.className='active'})

Если же проверку нужно в какой то другой момент осуществить для всех, то примерно так будет:

document.querySelectorAll('[data-item]').forEach(liElem=>{
  if(liElem.className==='active')){
    document.querySelectorAll('[data-item='+liElem.getAttribute('data-item')+']')
      .forEach(liActive=> 
        {liActive.className='active'})
  }
}

Comments

[Сергей delphinpro]

• .getAttribute('data-item') меняем на .dataset.item
  
• .className==='active' меняем на .classList.contain('active')
  
• .className='active' меняем на .classList.add('active')
  
• добавим код, который будет удалять ранее навешанные классы
  

В остальном сойдёт.