1

jQuery UI Icons を使用してスパンで表される、約 20 の異なるオプション ボタンを持つことができる Web アプリがあります。これらのオプションのいくつかは、おそらく 200 回まで使用できます。これらのオプションは、ページ上のアイテムの追加、編集、削除、並べ替えなどです。すべてがコンテナー DIV 内に含まれています。

基本的に、独自のオプション セットを持つコンテナ DIV があります。その中には、独自のオプション セットを持つ任意の数のセクション DIV があります。最後に、各セクション内にパネル DIV があり、そのオプションもあります (セクションごとに 100 パネル以上になる場合があります)。アプリの性質上、使用中にセクションとパネルがコンテナーに追加されたり、コンテナーから削除されたりします。

これらのオプションのいずれかがクリックされたら、「アクティブな」クラスを追加して強調表示し、選択したオプションに応じてコードを実行し、終了したらアクティブなコードを削除します。これまでのところ特に難しいことはありませんが、JQuery でイベント バインディングを処理するための最も効率的でベスト プラクティスの方法を探しています。

HTML の例 (例として簡略化されており、一部の JQuery クラスはスペルが間違っている可能性があります)...

<div id='container'>
    <span class='ui-icon ui-icon-plusthick optionButton addSection'></span>
    <span class='ui-icon ui-icon-gear optionButton editContainer'></span>

    <div>...Overall Container Contents Here...</div>

    <div id='section_1' class='section'>
        <span class='ui-icon ui-icon-gear optionButton editSection'></span>
        <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span>
        <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span>
        <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span>
        <span class='ui-icon ui-icon-plusthick optionButton addContent'></span>
        
        <div>...Section 1 Contents Here...</div>

        <div id='panel_1' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 1 Contents Here...</div>
        </div>

        <div id='panel_2' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 2 Contents Here...</div>
        </div>

        .
        .
        .
        (could be 150 panels here)
    </div>

    <div id='section_2' class='section'>
        <span class='ui-icon ui-icon-gear optionButton editSection'></span>
        <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span>
        <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span>
        <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span>
        <span class='ui-icon ui-icon-plusthick optionButton addContent'></span>
        
        <div>...Section 2 Contents Here...</div>

        <div id='panel_151' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 151 Contents Here...</div>
        </div>

        <div id='panel_152' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 152 Contents Here...</div>
        </div>

        .
        .
        .
        (could be another 150 panels here)
    </div>

    .
    .
    .
    (could be multiple sections here)
</div>

optionButtonこれは大まかなレイアウトであり、クリック イベントをクラスで何かにバインドする必要があります。現在、私はこれを使用しています...

$('#container').on('click', '.optionButton:not(".ui-state-disabled")', function(e) {
    var $tgt = $(this);
    $tgt.addClass("ui-state-active")

    if($tgt).hasClass('addSection') {
        // code for addSection button
    }

    if($tgt).hasClass('editContainer') {
        // code for editContainer button
    }

    ...and so on for all 20 buttons...

    $tgt.removeClass("ui-state-active")
});

これが最善の方法ですか？

または、各ボタン スタイルにクリック バインドを設定しても問題ないでしょうか。(つまり、on()関数への 20 回の呼び出し)

単一のバインドの問題は、コードが非常に煩雑になり、すぐに理解するのが難しくなることですが、1 つの共通のバインドにすべてをうまく適合させることができます。

私が考えた他の考え...

  • 単一バインド内の関数呼び出しにすぐに分岐して、次のリストだけで構成されるようにします。if($tgt.hasClass('thisClass')) { doThisFunction($tgt); }
  • 各オプション ボタン スパン内にカスタム要素を配置します。たとえばthisOption='editContent'。次に、クリックされたときに呼び出される関数をスパンコントロールに自動的に持たせるeditContentようなものを使用できるように、関数を呼び出します。eval( $tgt.prop('thisOption') + '(' + $tgt + ')' );各 "thisOption" 値に関連する関数がある限り、バインド全体でその関数に数行のコードしか必要ありません。
  • 私はJQueryでカスタムイベントを調べ、全体的なバインドでそれらを使用してトリガーしました.trigger()が、これは20回のクリックバインドと何ら変わらないと思います

これを達成するための最良の方法に関するアドバイスは大歓迎です（または、これについて間違った方法で考えている場合は、代替案があります）。私はこのプロジェクトを徐々に構築し、各ステップでできる限り効率的になるように注意しています。これをうまく説明できていない場合は、お詫び申し上げます。もう一度やり直します。

4

2 に答える 2