Конвертировать Jquery в VanillaJS

Question

Я не знаю, как переписать этот код из Jquery в VanillaJS.Я устал несколько дней и не нашел решения.

Мне кажется, я уже обыскал весь Интернет и ничего не нашел ... Может кто-нибудь дать мне "готовый" код?Пожалуйста, помогите мне еще раз.

const menuIconEl = $('.menu-icon');
const sidenavEl = $('.sidenav');
const sidenavCloseEl = $('.sidenav-close-icon');

function toggleClassName(el, className) {
  if (el.hasClass(className)) {
    el.removeClass(className);
  } else {
    el.addClass(className);
  }
}
menuIconEl.on('click', function() {
  toggleClassName(sidenavEl, 'active');
});
sidenavCloseEl.on('click', function() {
  toggleClassName(sidenavEl, 'active');
});

Весь код после использования Jquery работает, но после каждой попытки конвертировать его в vanillaJS он больше не работает.

Answer 1

Несколько примеров ниже.Вас может заинтересовать сайт YouMightNotNeedJquery

$('.menu-icon');
// can be replaced with:
document.querySelector('.menu-icon');

el.hasClass(className);
// can be replaced with:
el.classList.contains(className);

el.addClass(className);
// can be replaced with:
el.classList.add(className);

el.removeClass(className);
// can be replaced with:
el.classList.remove(className);

Может кто-нибудь дать мне "готовый" код?

Нет.Вы должны выучить это самостоятельно.

Answer 2

При выборе вещей вы можете использовать

document.querySelector( query:String ) // returns an HTMLElement or null
document.querySelectorAll( query:String ) // returns a NodeList you can iterate over

Для переключения классов вы можете использовать classList и его методы для управления классами на HTMLElements:

HTMLElement.classList.toggle( className:String, forced:Boolean|Null )

И для добавленияСлушатели событий, просто используйте addEventListener вместо on.

Это превращает ваш код в это:

const menuIconEl = document.querySelector('.menu-icon');
const sidenavEl = document.querySelector('.sidenav');
const sidenavCloseEl = document.querySelector('.sidenav-close-icon');
const onclick = e => sidenavEl.classList.toggle( 'active' );

menuIconEl.addEventListener( 'click', onclick );
sidenavCloseEl.addEventListener( 'click', onclick );

И это делает!