如何改進此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();
}