当所有特定元素都显示时触发的 JavaScript 事件:none

Question

所以，比如说，我有 5 个html 元素通过具有display:none属性的类隐藏。 然后有一个按钮，每次单击都会删除其中一个元素上的该类(单击5次会导致所有5个元素可见(。 然后所有这 5 个元素都有"自己的按钮"，单击时会display:none添加回此类。

现在，我希望当所有这些元素也不可见时，其他一些元素变得不可见。然后，当其中至少有一个是可见的(没有display:none(，我希望另一个元素也是可见的。

为了完成任务，我尝试使用MutationObserver。

let my_observer = new MutationObserver(function(mutations) {...}
elements_nodelist.forEach((my_element) => {
observer.observe(my_element, {attributes: true, attributeFilter: ["class"]});
})

但不幸的是，它对任何类变化都有反应，它不仅监视可见性状态，或者只监视这个特定的类变化。 是的，我可以得到一个mutation.oldValue的信息并到达element.classList，但我无法弄清楚使用它来解决所有这些问题的方法。

Answer 1

您可以检查是否所有隐藏元素都具有隐藏类：

const myHiddenElements = [...document.querySelectorAll('.my-hidden-element')];
const isAnyVisible     = myHiddenElements.filter( elm => elm.classList.contains('hidden-class') ).length < myHiddenElements.length;
if( isAnyVisible ) {
// Do what you want
}