Как добавить или отнять 1 по клику на кнопки?

Question

[Breeze1]

Добрый день.

Текстовое значение это количество товаров которое добавили в избранное.
Сами кнопки будут внутри каждого товара.

По клику на кнопку, товар добавляется в избранное, текстовое значение увеличивается на 1. Повторный клик на кнопку отнимает товар.

Как переделать логику чтобы если кликнуть на две кнопки, счетчик должен быть равен 2. Повторный клик на кнопку должен отнимать единицу.

codepen ссылки на пример

Comments

[Сергей Сергей]

$('.click').each(function(){
  $(this).on('click', function() {
    $(this).toggleClass('sum');
    $('.text').text($('.click.sum').length);
  });
})

[Breeze1]

Сергей Сергей, Спасибо )

Answer 1

[0xD34F]

let count = 0;
const countEl = document.querySelector('.text');
const buttons = [...document.querySelectorAll('.click')];
const onClick = e => updateCount(e.target.classList.toggle('clicked') ? 1 : -1);
const updateCount = change => countEl.innerText = count += change;
buttons.forEach(n => n.addEventListener('click', onClick));
updateCount(buttons.reduce((acc, n) => acc + n.classList.contains('clicked'), 0));

Comments

[Breeze1]

Спасибо )

Answer 2

[Сергей Соколов]

Можно выбранные элементы складывать в массив или Set(), и показывать его длину / размер.

Песочница: Codepen

const liked = new Set();

// ловить вообще все клики
document.addEventListener('click', e => {
  const el = e.target;
  if (!el.classList.contains('click')) return; // неинтересный клик
  if (liked.has(el)) { // уже выбран этот?
    liked.delete(el); // удалить
  } else {
    liked.add(el); // добавить
  }

  // пора показать что-нибудь
  document.querySelector('span.text').innerText = liked.size; // счётчик

  // список выбранных
  document.querySelector('span.list').innerText = [...liked.values()]
    .map(({innerText: t}) => t)
    .join(', ');
});

p.s. что-то и CodePen больше не позволяет вставляться в iframe в FireFox'е..