jquery：如何更新accordion keyup事件

inkz8wg9 于 2022-12-03 发布在 jQuery

关注(0)|答案(2)|浏览(141)

我有一个搜索功能，当搜索查询匹配时，它只显示折叠面板的特定面板。请参见fiddle。折叠面板是展开的（class=“in”），当某事匹配时。一旦搜索字段被清除，我希望 accordion 回到折叠状态。为此，我尝试删除添加的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。

jquery

来源：https://stackoverflow.com/questions/18263910/jquery-how-to-update-keyup-event-for-accordion

2条答案

按热度按时间

puruo6ea1#

该代码检查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/

赞(0）回复(0）举报 2022-12-03

cgyqldqp2#

尝试

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

赞(0）回复(0）举报 2022-12-03

我来回答

jquery：如何更新accordion keyup事件

2条答案

相关问题

热门标签

最新问答