Список классов Javascript - PullRequest
Новая
       37

Список классов Javascript

0 голосов
/ 11 апреля 2020

Я хотел бы удалить класс из одного элемента, когда щелкнул по другому?

Не могли бы вы помочь мне, пожалуйста 

<div class="tab">
    <button class="btn">Click Me</button>
</div>

<div class="tab">
    <button class="btn">Click Me</button>
</div>


    const dots = document.querySelectorAll('.btn');
    dots.forEach(dot => dot.addEventListener('click', handleClick));

    function handleClick(e) {
        this.classList.toggle('open');
        for (i = 0; i < dots.length; i++) {
            if (dots.classList.contains('open')) {
                dots.classList.remove('open');
            } else {
                dots.classList.add('open');
            }
        }

    }

1 Ответ

0 голосов
/ 11 апреля 2020

Здесь вы go: 

const dots = document.querySelectorAll('.btn');
dots.forEach(dot => dot.addEventListener('click', () => {
  dots.forEach(dotEl => {
  if(dot !== dotEl) {
   dotEl.classList.toggle('open');
  }
  })
}));
.open {
 background-color: blue;
}
<div class="tab">
  <button class="btn">Click Me</button>
</div>

<div class="tab">
  <button class="btn">Click Me</button>
</div>

Итак, теперь при нажатии кнопки все остальные кнопки classList переключаются, потому что мы переключаем ее, только если она не нажал кнопку (я имею в виду условие if).

...