如何在jquery中监听具有特定元素的元素是show（）还是hide（）？

Question

我在页面上有许多默认隐藏的元素。根据用户行为，可能会显示一个（使用 jquery 的 show()）。类似地，一个可能被隐藏（使用 jquery 的 hide()）。

所有这些元素都有相同的 css 类。有没有办法为具有特定类的元素创建一个侦听器，以查看它们中的任何一个在隐藏/显示之间是否发生了变化？

谢谢！

Answer 1

您可以使用:visible 或:hidden。更多信息在这里https://api.jquery.com/visible-selector/和这里https://api.jquery.com/hidden-selector/

var $foo = $('.foo');

$foo.first().hide();

$('.foo').each(function() {
  console.log($(this).is(":visible"));
  console.log($(this).is(":hidden"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">foo</div>
<div class="foo">foo</div>

Answer 2

要直接回答您的问题，没有内置方法，但我们可以通过自定义.on's 和.trigger's 来实现。

isVisibleList = [];
setInterval(function() {
  for (var i = 0, len = isVisibleList.length; i < len; i++) {
    if (isVisibleList[i].is(":visible") != isVisibleList[i].data("wasVisible")) {
      isVisibleList[i].data("wasVisible", !isVisibleList[i].data("wasVisible"));
      if (isVisibleList[i].is(":visible")) {
        isVisibleList[i].trigger("show");
      } else {
        isVisibleList[i].trigger("hide");
      }
    }
  }
}, 500);

$("#test").hide();
$("#test").data("wasVisible", false);
isVisibleList.push($("#test"));

$("#toggle").click(function() {
  $("#test").toggle();
});

$("#test").on("show", function() {
  console.log("shown");
});

$("#test").on("hide", function() {
  console.log("hidden");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Test toggle</button>
<div id="test">test</div>