javascript - 如何改进这个 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 元素，我在显示子菜单时使用它(它具有状态显示: block )。因此，我还必须在使用 .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 click:

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