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

Question

所以，比如说，我有 5 个 html 元素 通过 [=45 隐藏 =] 有一个 display:none 属性。然后有一个按钮，它会在每次单击时删除其中一个元素上的 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 变化做出反应，它不仅观察可见性状态，或者只观察这个特定的 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
}

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

JavaScript event that fires when all of the certain elements get display: none

html

javascript

events

event-handling