Помогите переписать JQuery в JS [дубликат]

243

11 мая 2018, 11:58

На данный вопрос уже ответили:

Как убрать активный класс с элемента при клике, если он уже имеет этот класс? 2 ответа
Аккордеон на чистом Javascript 2 ответа

$('.size_options li').click(function() { 
  $('.size_options li').removeClass('active-size'); 
  $(this).addClass('active-size'); 
})

<ul class="size_options"> 
  <li>123</li> 
  <li>321</li> 
  <li class="active-size">222</li> 
</ul>

Answer 1

Выбирать элементы можно функциями:

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.querySelectorAll
document.querySelector

Навешивать события через addEventListener

Управлять списком классов элемента через Element.classList

let list = document.querySelectorAll('.size_options'); 
list.forEach(ul => ul.addEventListener('click', ev => { 
  if (ev.target.tagName !== 'LI') return; 
  ul.querySelectorAll('li').forEach(li => { 
    li.classList.remove('active-size'); 
  }); 
  ev.target.classList.add('active-size'); 
}))

.active-size { 
  font-weight: bold; 
}

<ul class="size_options"> 
  <li>123</li> 
  <li>321</li> 
  <li class="active-size">222</li> 
</ul>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Можно ли внести изменения в карту Яндекса после её загрузки?

У меня возникла такая ситуация: при загрузке страницы загружается карта с неким количеством плейсмарков, и я хочу по клику пользователя на специальную...

208

javascript

Расчет стоимости на JavaScript [требует правки]

Нужно реализовать расчет стоимости ремонта как здесь https://gnezdovcom/ (смотреть вкладку калькулятор)

208

javascript

Интервал выполнения действия [дубликат]

На данный вопрос уже ответили:

227

javascript

Как сверстать двойной hover эффект для блока?

Разметка самой карточки :

219