Как убрать класс если он уже есть и добавить его на div по которому произошел клик?

Question

[Петр]

Доброй ночи.
Придумал себе задачу реализацию которой увидел на одном из сайтов доставки пиццы.
Под каждым товаром есть выбор толщины теста и размера самой пиццы. Реализовано так, что при клике на толщину теста вешается класс .checked и при этом убирается с другого элемента если он там есть.
У меня же получается только добавлять класс и при повторном клике на тот же элемент убирать его.
Прикладываю свои попытки реализации.

Answer 1

[0xD34F]

const containerSelector = '.card_options > div';
const itemSelector = '.option';
const activeClass = 'checked';
const toggleItem = item => item
  ?.closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList[n === item ? 'toggle' : 'remove'](activeClass));


// можно добавить обработчик клика каждому элементу индивидуально
document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleItem(e.currentTarget));

// а можно один раз - делегированный, всей странице
document.addEventListener('click', e => {
  toggleItem(e.target.closest(itemSelector));
});

Comments

[Dima Polos]

А, вот кто в вебпаке аглифаит мой джс)))

Answer 2

[Dima Polos]

Да е-ма-е, прям на первой странице, три на выбор: вариантов
Вообще, есть button для таких вещей, по которым кликают.

Comments

[Петр]

Извиняюсь. Видимо проморгал.

[Dima Polos]

Петр, не спешите спрашивать, сначала поищите, гораздо быстрее перестанете вообще спрашивать и другим начнете подсказывать;)