当jquery过滤器没有返回结果时，在div中显示消息

Posted 2023-02-27

我正在尝试将if / else语句实现到我拥有的Jquery Code代码段。

由于我是非常缺乏经验的javascript / Jquery用户，我遇到问题，我应该添加if / else。

正如现在的片段一样，如果有匹配则显示div，如果没有匹配则不显示任何内容。我希望它在找不到匹配时显示消息。

  $("#studyselector").change(function()
var selectItem = $(this).val().toLowerCase();
filter(selectItem);
);

function filter(e) 

  var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () 
      return regex.test($(this).data('name').toLowerCase())
  ).show();

这是一个工作jsfiddle的链接

$("#studyselector").change(function()
  var selectItem = $(this).val();
  filter(selectItem);
);
function filter(e) 
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () 
        return regex.test($(this).data('name'))
    ).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
    <option value="everything">everything</option>
     <option value="science">science</option>
     <option value="nature">nature</option>
     <option value="arts">arts</option>
  </select>

<div id="listSelection">

<div class="listItem" data-name="science, nature" >
  <h3>Science Collection</h3>
  <span class="fieldstudy">science, stars, something</span>
  <p>Science and stuff </p>
  <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
</div>

<div class="listItem" data-name="nature"  >
  <h3>Academic Search DB</h3>
  <span class="fieldstudy">everything</span>
  <p>All Studies </p>
    <p>  1000 references  </p>
    <p>  Texts from 4500 magazines and 1000 peer previewed articles</p>
</div>

<div class="listItem" data-name="arts" >
  <h3>Nature Science</h3>
  <span class="fieldstudy">nature, science</span>
  <p>All Studies </p>
    <p>  Nature and more  </p>
    <p>  6000 natur articles and 1000 peer previewed articles</p>
</div>

</div>

答案

请试试这个： -

添加html： -

<div class="error" style="display: none;">Not Found</div>

Js： -

$("#studyselector").change(function()
    var selectItem = $(this).val();
    filter(selectItem);
  );
  function filter(e) 
      var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
            $('.listItem').hide().filter(function () 
          return regex.test($(this).data('name'))          
      ).show();

      if($('.listItem:visible').length===0)
        $('.error').show();
      else
        $('.error').hide();
      
  

另一答案

你可以添加这个：

// bottom filter function

if($("#listSelection").children(":visible").length == 0) 
  $(".empty").show();
 else 
  $(".empty").hide();

.empty只是用于保存空消息的html元素的类，这里是一个jsfiddle example，基于你的代码

另一答案

您需要显示一条消息，但同时显示所有内容

如果过滤器没有显示任何内容，我在此处切换消息。

我还初始化以显示页面加载时选择的内容并允许所有内容在另一个选择后显示所有内容

$("#studyselector").change(function() 
  var selectItem = $(this).val();
  if (selectItem == "everything") $('.listItem').show();
  else filter(selectItem);
  $("#message").toggle($('.listItem:visible').length === 0);
).change();

function filter(e) 
  var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
  $('.listItem').hide().filter(function() 
    return regex.test($(this).data('name'))
  ).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
  <option value="everything">everything</option>
  <option value="science">science</option>
  <option value="nature">nature</option>
  <option value="arts">arts</option>
  <option value="nothing">nothing</option>
</select>

<div id="listSelection">

  <div class="listItem" data-name="science, nature">
    <h3>Science Collection</h3>
    <span class="fieldstudy">science, stars, something</span>
    <p>Science and stuff </p>
    <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
  </div>

  <div class="listItem" data-name="nature">
    <h3>Academic Search DB</h3>
    <span class="fieldstudy">everything</span>
    <p>All Studies </p>
    <p> 1000 references </p>
    <p> Texts from 4500 magazines and 1000 peer previewed articles</p>
  </div>

  <div class="listItem" data-name="arts">
    <h3>Nature Science</h3>
    <span class="fieldstudy">nature, science</span>
    <p>All Studies </p>
    <p> Nature and more </p>
    <p> 6000 natur articles and 1000 peer previewed articles</p>
  </div>
  <div id="message">Nothing found</div>
</div>

以上是关于当jquery过滤器没有返回结果时，在div中显示消息的主要内容，如果未能解决你的问题，请参考以下文章

jQuery插件冲突 - 请协助

当搜索没有返回结果时，Select2 过滤器值消失

jQuery / JS - 在DIV中计算结果

Drupal 视图 - 当视图没有结果时不显示任何公开的过滤器选项

如何在 DataTable 子行中使用 jQuery 返回 div

CSS：当显示设置为无时没有 DIV 宽度