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，所以我为每个子菜单项重复每个按钮操作。

进一步解释：

类.mega-hover被megamenu脚本添加到父html元素，我在显示子菜单时使用它（它有状态显示：块）。因此，我必须在使用.removeClass（“mega-hover”）关闭子菜单时删除此类。
类.ez-checked由jquery片段用于复选框样式，因此每个复选框元素都包含在div中，类为.ez-checkbox。选中复选框后，会追加附加类.ez-checked，因此在取消或取消选中时，我必须使用.removeClass（“ez-checked”）删除此类。
正如我在第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();
}

如何改进这个jQuery代码？

1 个答案: