有没有更简单的方法来重复多行代码 JQUERY答案

【问题标题】：Is there an easier way to repeat multiple lines of code JQUERY有没有更简单的方法来重复多行代码 JQUERY
【发布时间】：2018-01-11 14:33:40
【问题描述】：

我有多个函数，它们使用不同的元素来执行相同的任务。这是一个移动菜单。所以我有一个功能，当单击菜单按钮时..打开移动菜单，将汉堡包转换为“X”并使页面覆盖可见。我还有一个功能，当菜单打开并且用户更改设备的方向时关闭菜单。当用户单击/点击移动菜单之外的任何位置时，我还有一个功能，它将关闭菜单（以及单击“X”）。

在这些函数中，我经常重复自己，使用“removeClass 或 toggleClass”。有没有更简单的方法来表示所有这些代码行，以便它们在其他地方声明一次，然后在所有这些函数中调用？也许是一个变量？因为我不喜欢重复自己。

这是重复/示例代码。

$("#mobile-menu").removeClass("enabled1");
$("#menu-button").removeClass("open");
$("#mobile-menu-wrapper").removeClass("enabled1");
$("#page-overlay").removeClass("enabled1");

【问题讨论】：

标签： jquery function variables mobile menu

【解决方案1】：

您想将菜单的“打开”和“关闭”抽象为一个函数...

function openMenu(){
  //include all your slide toggles and what not here
}

function closeMenu(){
 $("#mobile-menu").removeClass("enabled1");
 $("#menu-button").removeClass("open");
 $("#mobile-menu-wrapper").removeClass("enabled1");
 $("#page-overlay").removeClass("enabled1");
}

...然后从您需要的任何地方调用该函数。

$('button').on('click',function(){
  openMenu();
});

$('button2').on('click',function(){
  closeMenu();
});

【讨论】：

也可以只使用...on('click', openMenu);（等），而不是在此处定义的函数中调用打开菜单。

【解决方案2】：

您可以拥有一个包含要删除该类的所有元素的数组，并将其传递给一个函数，在该函数中为每个您删除该类。

function allRemoveClass(selectors, cl) {
  selectors.forEach((s) => $(s).removeClass(cl));
}

let enabled = ["#mobile-menu", "#mobile-menu-wrapper", "#page-overlay"];
allRemoveClass(enabled, "enabled1");

let opened = ["#menu-button"];
allRemoveClass(opened, "open");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：