@AlenaZavr

Как реализовать лайк на чистом js?

Есть 5 кнопок:
<button class="photos__like-icon" type="button"></button>

И 5 дивов:
<div class="photos__like-count">254</div>

Как связать их, чтобы по клику на <button> менять на +1 число в соответствующем диве? И по повторному клику на -1.
  • Вопрос задан
  • 776 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('photos__like-icon')) {
    const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
    const count = document.querySelectorAll('.photos__like-count')[index];
    count.classList.toggle('active');
    count.textContent -= [ 1, -1 ][+count.classList.contains('active')];
  }
});
Ответ написан
profesor08
@profesor08 Куратор тега JavaScript
При помощи querySelectorAll выбери все кнопки и все дивы с результатом. Далее для каждой кнопки в цикле или в forEach задай событие клика, по которому будешь прибавлять или убавлять единице к значению элемента. При это задавай для кнопки некий класс, чтоб понимать, нажата была она или нет.

Для тяжелых случаев

const likeButtons = Array.from(document.querySelectorAll(".photos__like-icon"));
const likeCounts = Array.from(document.querySelectorAll(".photos__like-count"));

likeButtons.forEach((button, index) => {
  button.addEventListener("click", () => {
    button.classList.toggle("is-active");
    const current = Number(likeCounts[index].innerHTML);
    const inc = button.classList.contains("is-active") ? 1 : -1;
    likeCounts[index].innerHTML = current + inc;
  });
});

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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