JavaScript — как менять класс элемента?

Question

[Moe Green]

Есть список иконок:

nav.list
  a.list__icon(href="#) icon
  a.list__icon(href="#) icon
  a.list__icon(href="#) icon
  a.list__icon(href="#) icon

Каждый a.list__icon имеет два состояния (и два CSS-класса) - неактивное (с фоновой картинкой одного цвета) и активное (с фоновой картинкой другого цвета - .active). Фоновые картинки вшиваются через Base64 (SVG).

Как при помощи JavaScript при hover на произвольном a.list__icon менять (через classList.toggle) CSS-класс этого элемента?

Такое реализуется на jQuery просто:

$('.list__icon').on('hover', function () {
  $(this).toggleClass('active');
});

Насколько сложно такое организовать на нативном JavaScript? И стоит ли оно того? Пробовал для этой цели цикл for-in, но это было ошибкой.

По-моему, нечто похожее уже спрашивалось здесь (не мною), но там в ответе было что-то страшное (для меня) с помощью RegEx.

Answer 1

[profesor08]

Вполне легко и просто.

var links = document.querySelectorAll(".list__icon");
for(var i = 0; i < links.length; i++)
{
  links[i].addEventListener("mouseenter", function()
  {
    this.classList.add("active");
  });
  links[i].addEventListener("mouseleave", function()
  {
    this.classList.remove("active");
  });
}

Answer 2

[Дима Паутов]

[].forEach.call(document.querySelectorAll('.list__icon'), function (el) {
  el.addEventListener('mouseenter', function() {
this.classList.toggle('active');
  }, false);
});

Comments

[Interface]

У Вас нет обработки mouseleave.

Кстати, возможно имеет смысл вешать событие на nav.list, а не на a.list__icon(href="#")

[Андрей]

Interface: очень даже есть смысл

[Дима Паутов]

Interface: моя задача не стояла написать весь код за человека. В его функции тоже нету этого события! И в данном случае, я не вижу смысла вешать обработчик на родителя!