4

javascript と jQuery の初心者として、同じ要素に 2 つのクリック ハンドラーをアタッチするのは間違っているのでしょうか? 私はそれができることを知っていますが、これが「ベストプラクティス」に違反しているかどうかに興味があります

HTML の例:

<ul>
    <li id="all"   class="click_listener"> All Items </li>
    <li id="item1" class="click_listener"> Item 1    </li>
    <li id="item2" class="click_listener"> Item 2    </li>
    <li id="item3" class="click_listener"> Item 3    </li>
</ul>

jQuery の例 (ドキュメント準備完了):

$(".click_listener").click(
    function() {
       var productCode = $(this).id;
       filter(productCode);
    }
);

$("#all").click(
    function() {
       closeMenu();
    }
);

その他の jQuery 関数:

function filter(productCode) {
    // Displays selected product, or if 'all' was passed in, displays all products.
}

function closeMenu() {
    // Closes the menu by slideUp-ing the parent <ul>
}

コードを単純化しようとして、1 つまたは 2 つの間違いを犯した可能性がありますが、実際のサイトではすべてが機能しています。リスト メニューの項目をクリックすると、クリックした項目が正しく表示されます。ID が #all の li をクリックすると、すべてのアイテムが適切に表示され、メニューが閉じて小さなスライドアップ アニメーションが表示されます。

はい、機能しますが、間違った方法のように「感じる」だけです。これは許容できるベスト プラクティス アプローチですか?

また、すべてがクリックされたことを検出したときに、filter() 関数内で closeMenu() 関数をトリガーすることもできますが、上記のアプローチが問題ない場合は、時間を費やすことはしません (実際のサイトは上記よりもかなり複雑です)例なので、多くの場所でこれを行う必要があります)。

4

2 に答える 2