javascript - 将 Jquery 转换为 VanillaJS

Question

我不知道如何将此代码从 Jquery 重写为 VanillaJS。累了几天，一直没有找到解决办法。

我想我已经搜索了整个 Internet 但一无所获...... 有人可以给我一个“准备好的”代码吗？请再帮我一次。

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

选择东西时，可以使用

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

就是这样!