5

600を超えるフォームをMVC形式（php Codeigniter）でレンダリングしています。これらの各フォームには、「その他のオプション」というラベルの付いたボタンがあります。このボタンをクリックすると、同じ親要素にある非表示のdivが切り替えられ、より多くの入力フィールドとデータが表示されます。問題は、コンソールで兄弟の切り替えが速いことですが、実際のボタンをクリックすると、トリガーに非常に時間がかかります。

idを使用することをお勧めしますが、これほど多くのdiv要素を使用する場合は少し実用的ではありません。

これが私のjsファイルです

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

これが構造です（これらのdivは650あり、今後さらに増える予定です）

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

注：私はjQuery1.7.2を実行しています

4

2 に答える 2

3

デリゲートを使用しない

.on()リスナーの数を1つに減らすため、複数のイベントリスナーがある場合、@jrummellが提案するようなデリゲート（セレクター付き）を使用すると高速になります。

クラスを使用したよりシンプルなセレクター

したがって、この場合、より単純なセレクターを使用することをお勧めします。

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

このようにして、デリゲートがないため、セレクターが非常にシンプルになり、クリックがトリガーされたときのチェックが少なくなります。また、フォーム内の他の要素のクリックはキャプチャされません。

アニメーションは物事を遅くする

アニメーションは物事を遅くする可能性があります。さらに複数の要素を同時に実行するアニメーション。

1 つの親のすべてのdiv.meta要素を移動し、その 1 つの要素だけにアニメーションを適用してみてください。

を使用するだけでアニメーションを完全に削除することもできますtoggle()(この場合、複数のアイテムに関するコメントは引き続き有効です)。

例：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});
于 2013-03-21T20:02:48.400 に答える
0

jQuery.ui.css を含めると、再表示が非常に遅くなります。コストのかかる css ルールにより、ディスプレイが無効になり、レンダリング時間が遅くなりました。「正しい方向への微調整」は、質問のコメントにあります。

于 2013-03-21T20:12:12.100 に答える