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有值，然后删除该类。相反，它应该检查 if 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 回答