Поиск, удаление и добавление класса в список классов

Question

Есть элемент <a class="firstClass secondClass thirdClass">Рабочий элемент</a>. При наведении мыши на этот элемент

должен проверяться класс thirdClass - присутствует ли этот класс в списке классов;
если не присутствует, то должен добавляться в список классов

Также хочу знать как удалять класс из списка классов. (все эти действия должны производиться в javascript и jquery)

Каким образом можно реализовать следующую логику

При наведении курсора мыши на пункт меню (hover) текст пункта меню становится жирным (при этом добавляется класс .menulistitem_selected), а при покидании курсора мыши текст пункта меню становится обычным (удаляется класс .menulistitem_selected)? Я задал 3-й вопрос, потому что не уверен нужен ли toggle (такое ощущение, что нужен поиск по списку классов).

Answer 1

const elements = document.querySelectorAll('a');

elements.forEach((element) =>
{
  element.addEventListener('mousemove', (event) =>
  {
    event.target.classList.add('thirdClass');
  });
});

a.thirdClass::after
{
  content: "(с классом thirdClass)"
}

<a class="firstClass secondClass thirdClass">Рабочий элемент</a><br>
<a class="firstClass secondClass">Рабочий элемент</a>

Следующая задача

const items = document.querySelectorAll('ul li');

items.forEach((item) =>
{
    item.addEventListener('mouseover', (event) =>
    {
        event.target.classList.add('menulistitem_selected');
    });

    item.addEventListener('mouseout', (event) =>
    {
        event.target.classList.remove('menulistitem_selected');
    });
});

.menulistitem_selected
{
  font-weight: bold;
}

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
    <li>Menu item 5</li>
    <li>Menu item 6</li>
</ul>

Информация

Добавить класс:

Element.classList.add('thirdClass');

Или же несколько:

Element.classList.add('thirdClass', 'secondClass');

Удалить класс:

Element.classList.remove('thirdClass');

Или же несколько:

Element.classList.remove('thirdClass', 'secondClass');

Переключить класс (то есть.. Если у элемента был такой класс - он убирается, если не было - добавляется).

Element.classList.toggle('thirdClass');

Так же можно указать boolean значение, вторым параметром, что будет значить.. При true - всегда добавлять класс, при false - всегда убирать (если их нету или они есть).

Element.classList.toggle('thirdClass', true);

БЛОГ НА HUSL

Поиск, удаление и добавление класса в список классов

Ответы (1 шт):