Question

希望有人可以帮助我解决我遇到的这个奇怪的问题。我不是jQuery的专家，这是我写过的最初的几个脚本之一，所以任何帮助都将不胜感激！

我有一个常见问题解答页面，其中包含3个主要类别和6个子类别。使用单个HTML列表，我实现了2个jQuery函数，它们使用：

检索特定的列表项

1）实时搜索，或 2）选择子类别链接

这些功能中的每一个都按预期单独工作，但是......

问题

当在单个页面刷新中同时使用两个功能时 - 即如果用户首先进行搜索，那么之后选择一个类别，相应的类别列表不会被填充， HOWEVER 从返回肯定匹配的搜索字词中显示的项目仍会显示。

我怀疑这与隐藏在DOM中的元素有关，很可能与第36行的$(this).hide();有关，但我不能为我的生活找出一种不同的方式来编写功能不使用该行...

这是我的JS：

$(function() {
    $('.link-list a').each(function(){
        var type = $(this).attr('href').split('?')[1];
        $(this).on('click', function(e){
            $('#' + type).show();
            $('.faq-main').hide();
            $('.faq-back').show();
            $('.faq-back').on('click', function() {
                $(this).hide();
                $('#' + type).hide();
                $('.no-result').hide();
                $('.faq-main').show();
            });
            e.preventDefault();
        });
    });

    // SEARCH
    $("#search").on('input', function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val();
        if(filter == ''){
            $(".faq-list > * > *").hide();
            $(".faq-main").show();
            $(".no-results").hide();
            $(".faq-list > * > * > p").hide();
            return;
        }

        // Loop through the comment list
        $(".faq-list div div").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();

            // Show the list item if the phrase matches
            } else {
                $(".faq-main").hide();
                $(this).show();
                $('.faq-list > * > * > h3').hide();
            }
        });
    });
});

非常感谢任何帮助。 Fiddle example here

Answer 1

我建议在您使用搜索隐藏的项目中添加一个类，以便轻松识别它们。

 $(".faq-list div div").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass('search-hidden');

然后，当您使用类别链接回复点击时，您可以轻松地执行以下操作： $（＆＃39; .link-list a＆＃39;）。each（function（）{ $（＆＃39; .search隐藏＆＃39）。removeClass（＆＃39;搜索隐藏＆＃39）;

这只会重置上一次搜索的所有隐藏结果，再次显示它们。

在你的CSS中，只需处理项目的隐藏。

.search-hidden {display:none;}

现在，您可以快速查看浏览器控制台中隐藏了哪些项目以及隐藏的内容。

通常，为了使jQuery css路径更容易，您可能希望为标记添加一些类属性以保存此类事物.faq-list > * > * > h3。相反，将class="someheader"添加到h3标记的标记中，然后您可以轻松编写$('.someheader').hide();

使用单个HTML列表中的jQuery进行实时搜索和排序

1 个答案: