Как добавить класс по клику на кнопку внутри карточки товара?

Подскажите пожалуйста, как сделать так, чтобы активный класс добавлялся только по клику на кнопку "btn"? Сейчас у меня класс добавляется по клику на всю карточку.
Заранее благодарю!

https://jsfiddle.net/Logic2/2rxa93oL/12/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="box">
        <div class="item">
            <button class="btn">Push</button>
        </div>
        <div class="item">
            <button class="btn">Push</button>
        </div>
        <div class="item">
            <button class="btn">Push</button>
        </div>
    </div>
</body>
</html>


.box {
  display: flex;
}
.item {
  height: 300px;
  width: 200px;
  background: #eee;
  margin-right: 1rem;
  position: relative;
}
.item.active {
  background: blue;
}
.btn {
  position: absolute;
  bottom: 0;
  width: 100%;
}


function funcOne() {
    let item = document.querySelectorAll('.item');
    let btn = document.querySelector('.btn');

    for (let i = 0; i < item.length; i++) {
        item[i].addEventListener('click', function() {
            item[i].classList.add('active');
        });
    }
}
funcOne();
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
const container = document.querySelector('.box');

container.addEventListener("click", ({ target: t }) => {
   if(t.classList.contains("btn")) {
       const card = t.closest(".item");
       card && card.classList.add("active");
   }
})


А так касательно кода из вопроса, то тут всё достаточно просто. Чтобы решить задачу, вам нужно добавлять обработчик клика кнопке которая является дочерним элементом карточки, плюс можно заменить цикл for на forEach, что сделает код более читабельным.

document.querySelectorAll('.item').forEach(v => {
   v.querySelector(".btn").addEventListener('click', () => {
      v.classList.add('active');
   });
});


Однако в целом такой подход не очень. То есть я хочу сказать что добавление обработчиков в цикле, имеет свои подводные камни, про которые можно найти достаточно информации.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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