Комментарии пользователя szQocks

Как с помощью JS при клике на кнопках с одинаковыми классами удалять класс active с другой кнопки, добавлять только на нажатую кнопку?

szQocks @szQocks

Dallas15, исправил

const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');
const product = document.querySelector('.product');

const removeAllActive = () => {
  return dropDowns.forEach(item => item.classList.remove('active'));
};

dropDownBtns.forEach(btn => {
  btn.addEventListener('click', async (e) => {
      let parent = e.target.parentNode

      if(parent.classList.contains('active')) removeAllActive();
      else{
        await removeAllActive();
        parent.classList.add('active')
      }
  })

});

product.addEventListener('click', (e) => {
  if(e.target.classList.contains('dropdown__btn')){
    return;
  }
  else{
    return removeAllActive();
  }
});

Написано более трёх лет назад

Как с помощью JS при клике на кнопках с одинаковыми классами удалять класс active с другой кнопки, добавлять только на нажатую кнопку?

szQocks @szQocks

Dallas15, Как проверишь , напиши что функции твои выполняли function 1 2 3 и т.д. Я тебе там допишу код что бы 1 обработчик на всё повесить а не на каждую кнопку разные функции.

Написано более трёх лет назад

Как с помощью JS при клике на кнопках с одинаковыми классами удалять класс active с другой кнопки, добавлять только на нажатую кнопку?

szQocks @szQocks

Dallas15,

const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');
const product = document.querySelector('.product');

const removeAllActive = () => {
  return dropDowns.forEach(item => item.classList.remove('active'));
};

dropDownBtns.forEach(btn => {
  btn.addEventListener('click', async (e) => {
  	let parent = e.target.parentNode
  	
    if(parent.classList.contains('active')){
		return removeAllActive();
    }else{
    	await removeAllActive();
    	parent.classList.add('active')
    }
  });
});

product.addEventListener('click', removeAllActive);

При клике на блок с классом product, все родители кнопок будут терять класс активности
то есть, все элементы с классом .filter__dropdown

Сейчас должно всё работать как надо. только свой jq отключи на эти кнопки и с кнопок функции убери function 1 2 3 4 и т.д

Написано более трёх лет назад