Question

我有以下代码，我需要一些指导。只有在找不到结果时才需要 #no-results 元素。目前显示 IF 结果。

 $('#no-results').hide();
        $('#video-search-text').keyup(function () {
            $('.video-search').hide();
            $('#no-results').css("display", "none");
            var txt = $('#video-search-text').val(); 

            $('.video-search').each(function () {
                if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
                    $(this).show(); 

                }
                else {
                      $('#no-results').css("display", "block");

                }
            });

        });

为方便起见，我创建了以下JSFiddle。感谢

Answer 1

从for循环中删除没有结果的检查，并在搜索完成后放置它。像

 $('#no-results').hide();
 $('#video-search-text').keyup(function() {
     $('.video-search').hide();
     $('#no-results').css("display", "none");
     var txt = $('#video-search-text').val();
     var resultCount = 0;
     $('.video-search').each(function() {
         if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
             $(this).show();
             resultCount++;
         }
     });

     if (resultCount == 0) {
         $('#no-results').css("display", "block");
     }

 });

Answer 2

詹姆斯给了你一个很好的解决方案。基本上，问题来自这个循环

$('.video-search').each(function()

假设您在jsFiddle中搜索“abc”，它会找到与第一个<h1>匹配的内容。这使得它进入你的第一个区块，因此“未找到的结果”将不会显示。

但是，由于您为每个元素循环，它会将'abc'与'def'进行比较，然后进入else块。与'ghi'比较时也是如此。

只有在搜索中没有返回结果时，jquery才显示div

2 个答案: