Как удалить ранее переключенный класс, когда мы переключаем другой класс по событию click

Question

Я не использую Jquery и не хочу, я хотел снова переключить класс, как только следующий элемент будет переключен с тем же классом. поэтому класс из предыдущего удаляется. и только один класс включается одновременно.

Я пытался добавить document.getElementsByClassName(".panel").removeClass("open"); в функцию, чтобы сначала удалить все переключаемые классы ('open') но это не работает. я пытался добавить идентификатор и пытаться удалить класс из этого идентификатора по-прежнему не работает

function toggleOpen() {

     document.getElementsByClassName(".panel").removeClass("open");//this give me error
      this.classList.toggle('open');


    }
    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }

    }



    const panels = document.querySelectorAll('.panel');
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

Результат

Uncaught TypeError: document.getElementsByClassName(...).removeClass is not a function

Answer 1

Поскольку вы добавляете прослушиватель событий для каждого элемента, document.getElementsByClassName(".panel").removeClass("open"); не требуется.this внутри функции будет ссылаться на выбранный элемент.

removeClass - это метод jquery, который не будет доступен.document.getElementsByClassName возвращает список элементов, поэтому вам необходимо выполнить цикл по нему.

Попробуйте следующий пример.

function toggleColor() {
      this.classList.toggle('red');
}


const panels = document.querySelectorAll('.panel');
panels.forEach(panel => panel.addEventListener('click', toggleColor));

.green {
  color: green;
}
.red {
  color: red;
}

<p class="panel green">H1<p>
<p class="panel red">H2<p>
<p class="panel green">H3<p>
<p class="panel  red">H4<p>

Answer 2

Должно быть classList.remove("open"), а не removeClass("open")

Кроме того, это не сработает, потому что getElementsByClassName вернет коллекцию элементов, и вы не можете удалить класс из них сразу. Вам придется вызывать его для каждого элемента на панели.

Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))

Или, не превратив его сначала в массив, вы можете сделать

const panels = document.getElementsByClassName(".panel")
for (let panel of panels) {
  panel.classList.remove("open")
}