jQuery：根据元素可见性显示/隐藏警报

Question

我正在开发一个职位列表页面，该页面根据各种过滤器的组合显示结果。我希望在一组过滤器没有结果时出现“无匹配”消息，我想我会根据工作列表的可见性通过click 函数显示/隐藏p 元素元素。每个工作列表都包含在li.requisition-item 中；我尝试以两种不同的方式测试基于其他 SO 线程的可见性。这是我迄今为止所拥有的：

$(".requisition-filter a").on("click", function() {

    if ($('.requisition-item').is(":visible").length == 0 || $('.requisition-item').css('display') == 'none' ) {
        $('p.no-results').show();
        console.log('show alert');
    }
    else if ( $('.requisition-item').is(":visible").length || $('.requisition-item').css('display') == 'block' ) {
        $('p.no-results').hide();
        console.log('hide alert');
    }
    else {
        $('p.no-results').hide();
    }
});

因此，我有一个带有 no-results 类的段落元素，它应该根据这些条件显示/隐藏，但是脚本的行为不符合预期。警报将（有时）正确显示，但当过滤器再次显示列表时不会正确“重新隐藏”。有什么想法吗？

Answer 1

在附加的解决方案中，我只是通过点击“过滤掉项目”按钮来伪造过滤掉项目（就像我点击俄罗斯一样）。这会检查是否有任何结果可见，并相应地显示无结果消息。

$("button.filter").click(function() {
  $(".item").toggle();
  checkResults();
});

function checkResults() {
  var $items = $(".item");

  if ($items.filter(":visible").length == 0) {
    $(".message").show();
  } else {
    $(".message").hide();
  }
}

.message {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  left: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message">No results!</div>
<button class="filter">Filter out items</button>
<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ul>