javascript - 将Jquery转换为VanillaJS

我不知道如何将此代码从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之后，它都不再可用。

最佳答案

选择事物时，您可以使用

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 );

做到了！