jquery:如何更新手风琴的keyup事件

Question

我有一个搜索功能，当匹配搜索查询时，它只显示手风琴的特定面板。见小提琴。当某物相匹配时，手风琴就展开了。一旦搜索区域被清除，我希望手风琴能重新折叠起来。为此，我试图删除添加的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。

Answer 1

代码检查search-criteria是否有值，然后删除该类。相反，它应该检查是否为g == ""，然后删除该类。还要向该条件添加else子句，以便在g == ""时不添加in类。

$('#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/

Answer 2

尝试

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();
        }
    });
});

演示：Fiddle或Fiddle