OlegLantukh
@OlegLantukh
Верстальщик

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

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

<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?
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 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'})
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы