javascript - 隐藏子元素的 jQuery 更改功能

Question

我正在开发一个基于过滤器显示和隐藏元素的页面，即将列表项设置为 display:block 或 display:none 基于标准 - 我想在显示没有项目时显示一条消息(例如“抱歉，没有元素符合您的标准”。)如果我的列表如下所示:

<ul class="list">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
</ul>

我已经根据此尝试了以下更改功能 SO thread :

$("body").on('change', function() {
  if ($('.list').children(':visible').length == 0) {
    console.log('none visible');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

但是好像不起作用？非常感谢这里的任何帮助。

Answer 1

您还没有向我们展示触发更改事件的过滤器，因此我编写了一个示例输入过滤器:

<ul class="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>
<input type="text" class="filter">

当没有可见的列表项时触发事件并记录:

$(".filter").on("blur", function() {
  if ($('.list').children(':visible').length == 0) {
    console.log('none visible');
  }
});

Here is a Fiddle Demo .

当然，您可能需要调整事件的类型——这取决于过滤器的元素类型。在我的示例中，我使用了输入元素，因此 blur 是一个合适的事件。

如果您的过滤器是类 filter 的 div 内的链接元素，那么 click 将是一个合适的事件。

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