Javascript 将Jquery转换为VanillaJS

我不知道如何将这段代码从Jquery重写为VanillaJS。我已经累了几天了，还没有找到解决办法

我想我已经搜索了整个互联网，但什么也没找到。。。 有人能给我一个现成的密码吗？请再帮我一次

const menuIconEl=$'。菜单图标'； const sidenavEl=$'.sidenav'； 常量SideNavClosel=$'。SideNavCloseIcon'； 函数切换ClassNameel，className{ 如果el.hasClassName{ el.RemoveClassName； }否则{ el.addClassName； } } 菜单控件。单击，函数{ 切换ClassNameSideNavel，“活动”； }; 侧脐闭合器。点击，功能{ 切换ClassNameSideNavel，“活动”；

---

}; 下面是几个例子。你们可能对这个网站感兴趣

有人能给我一个现成的密码吗

---

不，你应该自己学。

下面有几个例子。你们可能对这个网站感兴趣

有人能给我一个现成的密码吗

---

不。你应该自己学习。

选择东西时，你可以使用

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

---

就这样

选择物品时，您可以使用

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

---

就这样

你为什么需要这个？几乎每个应用程序都在jQuery/支持jQuery上运行。如果您想使用任何特定的框架，那么您应该要求更改该框架中的代码。否则，在不影响任何设计范式的情况下，添加jQuery应该是小菜一碟。最好使用CDN。使用querySelector而不是$。使用addEventlistener而不是use classList.add而不是AddClassList看一看，这应该就是你的全部need@Akshay十年前jQuery非常好，但今天您可以在浏览器中免费获得这些特性。jQuery是一个巨大的库，大多数人使用一个或两个特性，而这些特性都不是必需的。这种“只需添加jQuery”的态度将导致代码变得粗糙和臃肿。如果可以删除它，请使用jQuery删除它。顺便说一句，toggleClassName是多余的-jQuery有一个toggleClass方法。为什么需要它？几乎每个应用程序都在jQuery/支持jQuery上运行。如果您想使用任何特定的框架，那么您应该要求更改该框架中的代码。否则，在不影响任何设计范式的情况下，添加jQuery应该是小菜一碟。最好使用CDN。使用querySelector而不是$。使用addEventlistener而不是use classList.add而不是AddClassList看一看，这应该就是你的全部need@Akshay十年前jQuery非常好，但今天您可以在浏览器中免费获得这些特性。jQuery是一个巨大的库，大多数人使用一个或两个特性，而这些特性都不是必需的。这种“只需添加jQuery”的态度将导致代码变得粗糙和臃肿。如果可以删除它，请删除它。顺便说一句，使用jQuery时，toggleClassName是多余的-jQuery有一个toggleClass方法。我不好，我认为它们触发了不同的效果，所以修复了它。我还使你的函数成为一个可以重用的单箭头函数，因为它们包含完全相同的代码，因此无需重复，这使代码看起来更简单。@keith是的，没错。jQuery上有一些我从未使用过的模糊特性：D删除了那一行。谢谢。我知道我会在这上面找到很棒的人forum@MAJO请注意，我使用了一个带有=>的箭头函数，该函数仅适用于现代浏览器。通常，开发人员让脚本将其转换为所需浏览器列表支持的内容。您可以轻松地用函数{…}替换它。只是一个提示。我的错，我认为它们触发了不同的效果，所以修复了它。我还使你的函数成为一个可以重用的单箭头函数，因为它们包含完全相同的代码，因此无需重复，这使代码看起来更简单。@keith是的，没错。jQuery上有一些我从未使用过的模糊特性：D删除了那一行。谢谢。我知道我会在这上面找到很棒的人forum@MAJO请注意，我使用了一个带有=>的箭头函数，该函数仅适用于现代浏览器。通常，开发人员让脚本将其转换为所需浏览器列表支持的内容。您可以轻松地用函数{…}替换它。只是一个提醒。

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