Javascript 如何改进jQuery代码？

我是一名jQuery新手，目前我依赖于修改现有脚本，但在不久的将来，我计划深入研究jQuery API

所以，我使用了一个jQuery代码段，它在导航菜单下拉列表中做了几件事，其中有5个子菜单，动态地填充了复选框

在每个子菜单的底部，我有4个按钮：

• 全选（选择子菜单内的所有复选框），id=“全选”
• 全部取消选择（取消选择子菜单内的所有选中复选框），id=“取消选中”
• 取消（取消选中所有复选框（如果有），并将子菜单样式显示切换为无），id=“取消选择”
• 确认（将子菜单样式显示切换为无），id=“确认选择”

因此，为了让这些按钮发挥作用，我将这些代码放在一起：

<script type="text/javascript">
    $(document).ready(function(){
    // dropdown 1
    $("#mega-menu-item-1 #checkAll").click(function () {
      $("#mega-menu-item-1 .ez-checkbox").addClass("ez-checked");
    });
    $("#mega-menu-item-1 #uncheckAll").click(function () {
      $("#mega-menu-item-1 .ez-checkbox").removeClass("ez-checked");
    });
    $("#mega-menu-item-1 #cancelSelection").click(function () {
      $("#mega-menu-item-1").removeClass("mega-hover");
      $("#mega-menu-item-1 .ez-checkbox").removeClass("ez-checked");
      $("#mega-menu-item-1 ul.sub").toggle();
    });
    $("#mega-menu-item-1 #confirmSelection").click(function () {
      $("#mega-menu-item-1").removeClass("mega-hover");
      $("#mega-menu-item-1 ul.sub").toggle();
    });
    // dropdown 2
    $("#mega-menu-item-2 #checkAll").click(function () {
      $("#mega-menu-item-2 .ez-checkbox").addClass("ez-checked");
    });
    $("#mega-menu-item-2 #uncheckAll").click(function () {
      $("#mega-menu-item-2 .ez-checkbox").removeClass("ez-checked");
    });
    $("#mega-menu-item-2 #cancelSelection").click(function () {
      $("#mega-menu-item-2").removeClass("mega-hover");
      $("#mega-menu-item-2 .ez-checkbox").removeClass("ez-checked");
      $("#mega-menu-item-2 ul.sub").toggle();
    });
    $("#mega-menu-item-2 #confirmSelection").click(function () {
      $("#mega-menu-item-2").removeClass("mega-hover");
      $("#mega-menu-item-2 ul.sub").toggle();
    });
    // dropdown 3
    $("#mega-menu-item-3 #checkAll").click(function () {
      $("#mega-menu-item-3 .ez-checkbox").addClass("ez-checked");
    });
    $("#mega-menu-item-3 #uncheckAll").click(function () {
      $("#mega-menu-item-3 .ez-checkbox").removeClass("ez-checked");
    });
    $("#mega-menu-item-3 #cancelSelection").click(function () {
      $("#mega-menu-item-3").removeClass("mega-hover");
      $("#mega-menu-item-3 .ez-checkbox").removeClass("ez-checked");
      $("#mega-menu-item-3 ul.sub").toggle();
    });
    $("#mega-menu-item-3 #confirmSelection").click(function () {
      $("#mega-menu-item-3").removeClass("mega-hover");
      $("#mega-menu-item-3 ul.sub").toggle();
    });
    // dropdown 4
    $("#mega-menu-item-4 #checkAll").click(function () {
      $("#mega-menu-item-4 .ez-checkbox").addClass("ez-checked");
    });
    $("#mega-menu-item-4 #uncheckAll").click(function () {
      $("#mega-menu-item-4 .ez-checkbox").removeClass("ez-checked");
    });
    $("#mega-menu-item-4 #cancelSelection").click(function () {
      $("#mega-menu-item-4").removeClass("mega-hover");
      $("#mega-menu-item-4 .ez-checkbox").removeClass("ez-checked");
      $("#mega-menu-item-4 ul.sub").toggle();
    });
    $("#mega-menu-item-4 #confirmSelection").click(function () {
      $("#mega-menu-item-4").removeClass("mega-hover");
      $("#mega-menu-item-4 ul.sub").toggle();
    });
    // dropdown 5
    $("#mega-menu-item-5 #checkAll").click(function () {
      $("#mega-menu-item-5 .ez-checkbox").addClass("ez-checked");
    });
    $("#mega-menu-item-5 #uncheckAll").click(function () {
      $("#mega-menu-item-5 .ez-checkbox").removeClass("ez-checked");
    });
    $("#mega-menu-item-5 #cancelSelection").click(function () {
      $("#mega-menu-item-5").removeClass("mega-hover");
      $("#mega-menu-item-5 .ez-checkbox").removeClass("ez-checked");
      $("#mega-menu-item-5 ul.sub").toggle();
    });
    $("#mega-menu-item-5 #confirmSelection").click(function () {
      $("#mega-menu-item-5").removeClass("mega-hover");
      $("#mega-menu-item-5 ul.sub").toggle();
    });
});

$（文档）.ready（函数（）{
//下拉列表1
$（“#mega-menu-item-1#checkAll”）。单击（函数（）{
$（“#mega-menu-item-1.ez checkbox”）.addClass（“ez checked”）；
});
$（“#mega-menu-item-1#取消选中”）。单击（函数（）{
$（“#mega-menu-item-1.ez复选框”）.removeClass（“ez选中”）；
});
$（“#mega-menu-item-1#取消选择”）。单击（函数（）{
$（“#mega-menu-item-1”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-1.ez复选框”）.removeClass（“ez选中”）；
$（“#mega-menu-item-1 ul.sub”）.toggle（）；
});
$（“#mega-menu-item-1#confirmSelection”）。单击（函数（）{
$（“#mega-menu-item-1”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-1 ul.sub”）.toggle（）；
});
//下拉列表2
$（“#mega-menu-item-2#checkAll”）。单击（函数（）{
$（“#mega-menu-item-2.ez checkbox”）.addClass（“ez checked”）；
});
$（“#mega-menu-item-2#取消选中”）。单击（函数（）{
$（“#mega-menu-item-2.ez复选框”）.removeClass（“ez选中”）；
});
$（“#mega-menu-item-2#取消选择”）。单击（函数（）{
$（“#mega-menu-item-2”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-2.ez复选框”）.removeClass（“ez选中”）；
$（“#mega-menu-item-2 ul.sub”）.toggle（）；
});
$（“#mega-menu-item-2#confirmSelection”）。单击（函数（）{
$（“#mega-menu-item-2”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-2 ul.sub”）.toggle（）；
});
//下拉列表3
$（“#mega-menu-item-3#checkAll”）。单击（函数（）{
$（“#mega-menu-item-3.ez checkbox”）.addClass（“ez checked”）；
});
$（“#mega-menu-item-3#取消选中”）。单击（函数（）{
$（“#mega-menu-item-3.ez复选框”）.removeClass（“ez选中”）；
});
$（“#mega-menu-item-3#取消选择”）。单击（函数（）{
$（“#mega-menu-item-3”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-3.ez复选框”）.removeClass（“ez选中”）；
$（“#mega-menu-item-3 ul.sub”）.toggle（）；
});
$（“#mega-menu-item-3#confirmSelection”）。单击（函数（）{
$（“#mega-menu-item-3”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-3 ul.sub”）.toggle（）；
});
//下拉列表4
$（“#mega-menu-item-4#checkAll”）。单击（函数（）{
$（“#mega-menu-item-4.ez checkbox”）.addClass（“ez checked”）；
});
$（“#mega-menu-item-4#uncheckAll”）。单击（函数（）{
$（“#mega-menu-item-4.ez复选框”）.removeClass（“ez选中”）；
});
$（“#mega-menu-item-4#取消选择”）。单击（函数（）{
$（“#mega-menu-item-4”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-4.ez复选框”）.removeClass（“ez选中”）；
$（“#mega-menu-item-4 ul.sub”）.toggle（）；
});
$（“#mega-menu-item-4#confirmSelection”）。单击（函数（）{
$（“#mega-menu-item-4”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-4 ul.sub”）.toggle（）；
});
//下拉列表5
$（“#mega-menu-item-5#checkAll”）。单击（函数（）{
$（“#mega-menu-item-5.ez checkbox”）.addClass（“ez checked”）；
});
$（“#mega-menu-item-5#取消选中”）。单击（函数（）{
$（“#mega-menu-item-5.ez复选框”）.removeClass（“ez选中”）；
});
$（“#mega-menu-item-5#取消选择”）。单击（函数（）{
$（“#mega-menu-item-5”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-5.ez复选框”）.removeClass（“ez选中”）；
$（“#mega-menu-item-5 ul.sub”）.toggle（）；
});
$（“#mega-menu-item-5#confirmSelection”）。单击（函数（）{
$（“#mega-menu-item-5”）.removeClass（“mega-hover”）；
$（“#mega-menu-item-5 ul.sub”）.toggle（）；
});
});

每个子菜单都有id#mega-menu-item-1/2/3/4/5，因此我对每个子菜单项重复每个按钮操作

进一步解释一下：

megamenu脚本将Class.mega hover添加到父html元素中，我在显示子菜单时使用它（它有状态显示：block）。因此，在用.removeClass（“mega hover”）关闭子菜单时，我还必须删除这个类

jquery代码段使用Class.ez checked来设置复选框样式，因此每个复选框元素都用Class.ez checkbox包装在div中。选中复选框时，附加类.ez checked，所以在取消或取消选中时，我必须使用.removeClass（“ez checked”）删除该类

正如我在第1点中提到的，我正在使用megamenu脚本，它还可以切换子菜单的显示状态。因此，在#confirmSelection或#cancelSelection上，我必须用$（“#mega menu item ul.sub”）.toggle（）进行切换

---

我确信这不是实现所有这些的最顺利的方法，所以我请有经验的开发人员提出建议，如何优化代码，我想至少有很多重复。

从使用类而不是id开始。 您可以简化checkall单击，例如：

$(".checkAll").click(function() {
    var parent = $(this).closest(".mega-menu-item");
    parent.removeClass("mega-hover");
    $("ul.sub", parent).toggle();
}

---

您有多个具有相同ID的元素（例如，

#checkAll

）。这是无效的HTML。#mega菜单项id是从megamenu脚本继承的，我不能更改它，也不能破坏菜单。使用id选择器也不是最佳做法，因为它们比类更快，因为id直接映射到本地JavaScript方法getEl