1

jQueryを使用して、クライアント側で2000divを超える出力を行うASP.NETリピーターをフィルタリングしています。リピーターのItemTemplateは、div（runat = "server"）を保持します。リピーターのOnItemDataBoundイベントでは、データに従ってcssクラスを適用するロジックがいくつかあります。次に、cssクラスと同じ名前のidを持つリンクがいくつかあるので、リンクをクリックすると、jQueryは、一致するid/クラスコンボを持たないリピーターによって出力されたすべてのdivを非表示にします。また、divに複数のクラスが適用されている場合もあります。

最初の2回ほどはリンクをクリックしてdivをフィルタリングしますが、その後ハングアップして応答しなくなります。

jQuery：

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if ($(this).attr('id') == 'all') {
            $('#divIssueMenu').children().show();
        }
        else {
            var filter = $(this).attr('id');
            $('#divIssueMenu').children().show();
            $('#divIssueMenu').children().not('.' + filter).hide();
        }
    });
});

そして出力されたマークアップ：

<div id='filters'>
    <a href='#' id="all" >All</a> | 
    <a href='#' id='filter1'>Filter 1</a> | 
    <a href='#' id='filter2'>Filter 2</a> | 
    <a href='#' id='filter3'>Filter 2</a> |
    and so on...
    <div class='clear'></div>
</div>
<div id="divIssueMenu">
    Menu

    <div id="rpMenu_divMenu_0" class="filter1">
       data here...
    </div>

    <div id="rpMenu_divMenu_1" class="filter2">
        more data...
    </div>

    <div id="rpMenu_divMenu_2" class="filter1 filter2">
        more data...
    </div>

    <div id="rpMenu_divMenu_3" class="filter1 filter2 filter3">
        more data...
    </div>


    and so on, about 2000+ records...
</div>

これをより効率的にする方法はありますか？それが問題ですか？前もって感謝します！

4

3 に答える 3

1

パフォーマンスの面では、アイテムをキャッシュして、それに基づいて表示または非表示にしたくなるでしょう。

var $all = $('div','#divIssueMenu');
var $filter1 = $('div.filter1','#divIssueMenu');
var $filter2 = $('div.filter2','#divIssueMenu');
var $filter3 = $('div.filter3','#divIssueMenu');

次に、フィルターを連想配列に入れて、IDを正しいセットに割り当てることができます。

var filters = {all:$all, filter1:$filter1, filter2:$filter2, filter3:$filter3}

クリックコードは次のようになります。

$('#filters a').click(function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $all.hide();
    filters[id].show();
});

これの利点は、クリックが行われるたびにセレクターを評価する必要がないことです。

実例： http： //jsfiddle.net/maZD7/

于 2012-08-06T16:05:43.140 に答える
0

$('#divIssueMenu').children()クリックイベントの外部で1回実行し、イベント内でその変数を参照することで、jQueryコレクションを作成するための呼び出しの数を減らします（下のブロックの最初の行）。

次に、クリックイベントで、すべてのグループをオンにしたり、一部を選択的にオフにしたりするのではなく、jQueryのtoggle（）関数を使用して、それぞれを表示するかどうかを条件にします。

var $allGroups = $('#divIssueMenu').children();

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if (this.id == 'all') {
            $allGroups.show();
        }
        else {
            var filter = this.id;
            $allGroups.each(function(){
                $(this).toggle($(this).hasClass(filter));
            });
        }
    });
});
于 2012-08-06T16:15:29.700 に答える
0

問題が正確に何であるかを言うのは難しいので、他の人がやったように、私は次善のように見えることを指摘することができます。

効率と読みやすさに関するFaustの答えは気に入っていますが、クラスを使用して表示または非表示にする方が高速です。したがって、切り替える代わりに、クラスを追加するか、クラスを削除します。

var $allGroups = $('#divIssueMenu').children();

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if (this.id == 'all') {
            $allGroups.show();
        }
        else {
            $allGroups.removeClass('visible');
            var filter = this.id;
            $allGroups.hasClass(filter).addClass('visible');
        }
    });
});

... cssは次のようになります：

#divIssue>div {display:none;}
#divIssue>div.visible {display:block;}
于 2012-08-06T17:19:50.770 に答える