@maxemga

Как применить анимацию для всех объектов с одинаковым id/классом?

У меня есть 6 объектов при наведении, на которые должна происходить анимация
Я привык искать в js объекты по id, но в данной ситуации когда я прописываю

const elem = document.getElementById("ID");

То находит один объект и анимация происходит к одному объекту (ID должен быть один на странице, как гласит правило HTML)
Но если я хочу найти все объекты с одинаковым классом/id и применить к ним анимацию?

const elem = document.querySelectorAll(".class");

Но у меня все равно не получается, пытался выводить

for (let i = 0; i < elem.length; i++) {
     elem[i].classList.toggle("")
}


Как правильно мне это сделать?
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
Awilum
@Awilum
Flextype & Atomastic Developer
Потому что ID с одним названием должен быть только один!

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.


htmlbook.ru/html/attr/id

Если с классами то вот так

HTML
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>

CSS
.class {
  color: red;
}

JS
var els = document.querySelectorAll('.item');
[].forEach.call(els, function(el, i, els) {
     el.classList.add("class");
});


https://codepen.io/Awilum/pen/OJbjRwz
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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