このjQueryコードをどうすれば改善できますか？

Question

私はjQuery初心者ですが、今は既存のスクリプトを修正することに頼っていますが、近い将来jQuery APIの深みを掘り下げて計画します。

jQueryスニペットを使用しています。これはナビゲーションメニューのドロップダウン内に5つのサブメニューがあり、チェックボックスで動的に入力されます。

• は、（サブメニュー内のすべてのチェックボックスを選択する）全てを選択し、ID =「checkAll」
• 選択解除全て（解除全サブメニュー内のチェックボックスをチェックする）：各サブメニューの下部に
  Iは4つのボタンを持っています、ID = "uncheckAll"
• キャンセルが（任意およびnoneにサブメニュースタイルの表示を切り替えた場合、すべてのチェックボックスをチェックする選択解除）、ID = "cancelSelection"
• 確認（noneにサブメニュースタイルの表示を切り替えます）、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番号のメガメニュー項目-1/2/3/4/5を有しています、私はすべてのサブメニュー項目のそれぞれのボタンアクションを繰り返します。

少しさらにそれを説明するには、次の

1. クラス.mega-ホバーは、私が使用しているた、megamenuスクリプトによって、親html要素に追加されたサブメニューが表示されたとき（それは状態表示があります。ブロック）。ですから、.removeClass（ "mega-hover"）でサブメニューを閉じるときにもこのクラスを削除する必要があります。

2. クラス.ez-checkedは、checkboxスタイリングのためにjquery snippetによって使用されるので、各チェックボックス要素はdiv内のクラス.ez-checkboxでラップされます。チェックボックスをオンにすると、追加の.ez-checkedクラスが追加されるので、キャンセルするかチェックを外すと、このクラスを.removeClass（ "ez-checked"）で削除する必要があります。

3. 私はポイント1で述べたように、私はサブメニューの表示状態をトグルするメガメニュースクリプトを使用しています。 #confirmSelectionまたは#cancelSelectionでは、$（ "＃mega-menu-item ul.sub"）とトグルする必要があります。

私は、これはこのすべてを行うにはスムーズな方法ではありません確信しているので、私は私が繰り返しがたくさんあると思います、このコードを最適化する方法を、提案するために、経験豊富な開発者を求めています少なくとも。

Answer 1

まず、idの代わりにクラスを操作します。 あなたは、例えば、次のようにクリックしcheckall簡素化することができます：

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