隐藏子元素的jQuery更改功能答案

【问题标题】：jQuery change function for hidden child elements隐藏子元素的jQuery更改功能
【发布时间】：2017-01-27 14:21:21
【问题描述】：

我正在开发一个基于过滤器显示和隐藏元素的页面——也就是说，根据条件将列表项设置为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 尝试了以下change 函数：

$("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>

但它似乎不起作用？非常感谢这里的任何帮助。

【问题讨论】：

我认为没有什么会触发您的事件侦听器。身体什么时候发生变化？我想你想在页面加载时显示它，所以只需删除 $("body").on('change', function() { 包装器。
@karacsi_maci 我正在使用事件侦听器，因为 .list 中的项目正在针对不同的选择进行动态过滤（设置为 display:none 或 display:block）...
如果列表选项全部隐藏，更改事件将如何触发？
是的，我明白了，但是当body 变了？？？
如果它应该在过滤器更改时触发，我们需要查看过滤器。或者，我们需要知道分配给过滤器的类以及它们的输入类型。

标签： javascript jquery

【解决方案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() { ...

【讨论】：

@nickpish - 单击莫斯科后，我看到了日志记录。单击人力资源后，我看到一个错误。我建议您在事件中使用控制台日志记录来验证事件是否正在触发（因此将其作为函数的第一行），然后检查 $('.list').children() 的内容以查看条件不存在的原因遇到了。

【解决方案2】：

我可能错过了一些东西，但如果听起来你总是可以做一个简单的length 检查页面何时加载。

if ($('.list li').length = 0) {
 console.log('none visible');
}

http://codepen.io/justdan/pen/EggZQx

【讨论】：

感谢您的回复；但我需要在点击过滤器时运行检查，动态影响列表项的可见性——这似乎只在页面加载时触发
啊是的，这是真的。这是一个可能的想法的快速小提琴。如果您可以匹配您过滤掉的li's 和.remove() 它们，您可以动态获取更新的列表长度。 jsfiddle.net/9hxazkoc