1

検索クエリが一致したときに、アコーディオンの特定のパネルのみを表示する検索機能があります。フィドルを参照してください。sth が一致すると、アコーディオンが展開されます (class="in")。検索フィールドがクリアされたら、アコーディオンを折りたたんだ状態に戻したいと思います。そのために、追加された class="in" を削除しようとしましたが、フィールドがクリアされたときに更新されていないようです。何か案は？

    var $infoPanels = $('.panel-info'),
    cachedText = [];
$infoPanels.each(function (i, v) {
    cachedText[i] = $(this).text().toLowerCase();
});

$('#search-criteria').on('keyup', function () {
    var g = $(this).val().toLowerCase();
    if (g !== ""){
    $infoPanels.parentsUntil('.accordion').hide().removeClass("in");
    }
    $.each(cachedText, function (i, v) {
        if (g.length > 0 && v.indexOf(g) !== -1) {
            $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show();
        }
    });
});

更新:else ifを追加することでこれが機能するようになりました。 Fiddleを参照してください。

4

2 に答える 2

0

コードsearch-criteriaは、 に値があるかどうかを確認してから、クラスを削除します。代わりに、かどうかを確認してg == ""から、クラスを削除する必要があります。また、elseその条件に句を追加して、 のinときにクラスが追加されないようにしg == ""ます。

$('#search-criteria').on('keyup', function () {
    var g = $(this).val().toLowerCase();

    if (g == ""){  //check if g is empty string

        $infoPanels.parentsUntil('.accordion').hide().removeClass("in");

    }else{ //if not empty add the class

        $.each(cachedText, function (i, v) {
            if (g.length > 0 && v.indexOf(g) !== -1) {
               $infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show();
            }
        });
    }
});

作業例: http://jsfiddle.net/bsXGp/2/

于 2013-08-16T00:18:35.480 に答える
0

試す

var $infoPanels = $('.panel-info'),
    cachedText = [];
$infoPanels.each(function (i, v) {
    cachedText[i] = $(this).text().toLowerCase();
});

$('#search-criteria').on('keyup', function () {
    var g = $(this).val().toLowerCase();
    $infoPanels.hide();
    $.each(cachedText, function (i, v) {
        if (g.length > 0 && v.indexOf(g) !== -1) {
            $infoPanels.eq(i).show();
        }
    });
});

デモ:フィドルまたはフィドル

于 2013-08-16T00:27:07.707 に答える