Question

我有一个简单的页内搜索功能，只显示包含搜索词的主题。

每个部分都有一个标题，<h2> - 我想要显示未隐藏的块的标题。

问题：搜索后并不总是显示h2标题

This is a fiddle to test the issue

失败/成功示例：

其中一个标题为Complaints and cancellations - 标题为How do I cancel

的子部分

如果您搜索how do，那么您将看到第一个块显示，标题为...标题为Guides的第二个块消失。这是正确的。

如果再次搜索I cancel，则第二个块会消失，这是正确的，但是第一个块的标题也会隐藏，它不应该隐藏。

这是javascript：

$("#faq_search").on("input", function () {
        var v = $(this).val().toLowerCase();
        $(".vc_tta-panel").each(function () {
            var eachPlace = $(this).html().toLowerCase();
            if (v != "" && eachPlace.search(v) == -1) {
                $(this).parent().parent().parent().siblings('h2').hide();
                $(this).fadeOut();

            } else {
                $(this).fadeIn('fast', function(){
                    $(this).parent().parent().parent().siblings('h2').show();   
                });
            }
        });
    });

有更好的方法吗？

Answer 1

问题是hide的{{1}}可以在 h2之后发生在同一部分，具体取决于匹配的顺序部分。

快速解决方案是首先完成所有生皮，然后是展示：

show

JSFiddle： http://jsfiddle.net/TrueBlueAussie/L0m3z98y/2/

说明：

$("#faq_search").on("input", function () { var v = $(this).val().toLowerCase(); $(".vc_tta-panel").each(function () { var eachPlace = $(this).html().toLowerCase(); if (v != "" && eachPlace.search(v) == -1) { $(this).closest('.vc_tta').siblings('h2').hide(); $(this).fadeOut(); } }); $(".vc_tta-panel").each(function () { var eachPlace = $(this).html().toLowerCase(); if (v == "" || eachPlace.search(v) > -1) { $(this).fadeIn('fast', function(){ $(this).closest('.vc_tta').siblings('h2').show(); }); } }); });不是一个可维护的解决方案。对DOM结构的任何更改都将破坏代码。而是将parent().parent().parent()与适当的目标选择器一起使用。这是更短更安全的

隐藏/显示

1 个答案:

说明：