JavaScript 事件在所有特定元素都显示时触发：无

Question

所以，比如说，我有 5 个html 元素，它们通过具有display:none属性的class隐藏。 然后有一个按钮，每次点击都会删除其中一个元素上的class （5 次点击会导致所有 5 个元素都可见）。 然后所有这 5 个元素都有“他们自己的按钮”，当点击时，它会添加这个class并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"]});
  })

但不幸的是，它只对任何 class 变化作出反应，它不仅观察 state 的可见性，或者只观察这个特定的 class 变化。 是的，我可以得到一个mutation.oldValue信息并得到element.classList ，但我想不出用它来解决这一切的方法。

Answer 1

您可以检查所有隐藏元素是否具有隐藏的 class：

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
}