Есть несколько товаров в интернет-магазине. У каждого должен быть счетчик выбранного кол-ва. После выгрузки товаров из БД все классы и идентификаторы повторяются, и у меня выходит взаимодействовать только с одним счетчиком.
Как сделать, чтобы у каждого товара был работающий счетчик?
P.S. Просьба предлагать решения на чистом JS.
var plus = document.querySelectorAll ('.plus');
var minus = document.querySelectorAll('.minus');
var number = document.querySelectorAll('.number');
var i = 0;
plus[i].onclick = up;
function up() {
var count = Number(number[i].innerHTML);
number[i].innerHTML = count += 1;
}
minus[i].onclick = down;
function down() {
var count = Number(number[i].innerHTML);
number[i].innerHTML = count -= 1;
}
Ответ
Можно проходить по всем блокам .count и добавлять обработчики клика в рамках конкретного блока:
function addHandlers(count) {
var minus = count.querySelector(".minus");
var number = count.querySelector(".number");
var plus = count.querySelector(".plus");
plus.addEventListener("click", function() {
number.innerText++;
});
minus.addEventListener("click", function() {
number.innerText--;
});
}
var counts = document.querySelectorAll(".count");
counts.forEach(addHandlers);
.minus, .number, .plus {
display: inline;
}
ID элементов должны быть уникальны. В данной ситуации вполне можно обойтись только классами, так что, возможно, стоит отказаться от использования id здесь
Комментариев нет:
Отправить комментарий