如何改进此jQuery代码？

Question

我是jQuery的新手，现在我依靠修改现有的脚本，但是在不久的将来，我计划深入研究jQuery API的深度。

因此，我使用的是jQuery代码段，该代码段在导航菜单下拉列表中有5个子菜单，这些子菜单由复选框动态填充。

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

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

因此，为了使这些按钮正常工作，我整理了以下代码：

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

每个子菜单都有ID＃mega-menu-item-1 / 2/3/4/5，因此我为每个子菜单项重复了每个按钮操作。

进一步解释一下：

1. .mega-hover类通过megamenu脚本添加到父html元素，当显示子菜单（状态显示为：块）时，我正在使用该脚本。 因此，在使用.removeClass（“ mega-hover”）关闭子菜单时，我还必须删除此类。

2. jQuery代码片段将.ez-checked类用于复选框样式，因此每个复选框元素都与.ez-checkbox类一起包装在div中。 选中复选框后，将附加其他类.ez-checked，因此在取消或取消选中时，我必须使用.removeClass（“ ez-checked”）删除此类。

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

我确信这不是完成所有这些操作的最流畅的方法，所以我在请有经验的开发人员提出建议，如何优化该代码，我想至少有很多重复的地方。

Answer 1

首先使用类而不是ID。 您可以像这样简化Checkall单击：

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