Преобразовать jQuery в JS toggleClass

Question

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

Следующий код jQuery:

( function( $ ) {
    $(document).ready(function($){
        $('.navbar-burger').on('click',function() {
            $('.navbar-burger').toggleClass('is-active');
            $('.navbar-menu').toggleClass('is-active');
        });

    });

} )( jQuery );

Вот моя JS попытка:

document.getElementsByClassName('navbar-burger').onclick = function() {
    this.classList.toggle('is-active');
}

Answer 1

Необходимо изменить пару вещей.

1. Замените $(document).ready событием DOMContentLoaded или поместите сценарий перед закрывающим тегом </body>.
2. Используйте document.querySelectorAll, чтобы получить все элементы, соответствующие селектору, вместо $. Вам потребуется l oop поверх всех элементов вручную.
3. Используйте Element.addEventListener(eventName,handler) вместо $(...).on(eventName, handler).
4. Используйте Element.classList.toggle вместо $(...).toggleClass.

window.addEventListener("DOMContentLoaded", function(){
   const burgers = document.querySelectorAll('.navbar-burger');
   const menus = document.querySelectorAll('.navbar-menu');
   burgers.forEach(burger => burger.addEventListener("click", function(){
        burgers.forEach(burger => burger.classList.toggle('is-active'));
        menus.forEach(menu => menu.classList.toggle('is-active'));
   }));
});

Answer 2

Вы можете просто использовать функцию addEventListener JS с click. Используйте метод querySelector, чтобы переключить класс на menu и nav в Pure JS.

Использование document.getElementsByClassName будет не работать так, как вы пытались, потому что он возвращает список элементов для этого вам понадобится foreach l oop. В вашем случае это не требуется.

Изменить: Кроме того, я вижу, что вы используете jQuery $(document).ready в чистом виде JS, вы можете использовать DOMContentLoaded - это гарантирует ваш script готов при загрузке страницы.

Демо

window.addEventListener("DOMContentLoaded", function() {

  //Nav burger
  let navBurg = document.querySelector('.navbar-burger')

  //Nav menu
  let navMenu = document.querySelector('.navbar-menu')

  //Click function
  navBurg.addEventListener('click', function(e) {
    this.classList.toggle('is-active');
    navMenu.classList.toggle('is-active');
  });
});

.is-active {
  background: blue;
}

<button class="navbar-burger">
  Click Me
 
</button>

<div class="navbar-menu">
  Menu
</div>