Question

我正在尝试对我拥有的Jquery代码片段实施if / else语句。

由于我是经验不足的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>

Answer 1

您可以添加此内容：

// bottom filter function

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

.empty只是包含空消息的html元素的类，这里是基于您的代码的jsfiddle example

Answer 2

请尝试以下操作：-

添加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();
      }
  }

Answer 3

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

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

我还初始化了页面加载时显示的所有内容，并允许所有内容在再次选择后显示所有内容

$("#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中显示消息

3 个答案: