Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/466.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
当所有特定元素都显示时激发的JavaScript事件:无_Javascript_Html_Events_Event Handling - Fatal编程技术网

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

当所有特定元素都显示时激发的JavaScript事件:无,javascript,html,events,event-handling,Javascript,Html,Events,Event Handling,比如说,我有5个html元素,它们通过类隐藏,该类具有显示:无属性。 然后有一个按钮,每次点击(5次点击后,所有5个元素都可见)就会删除其中一个元素上的类。 然后,所有这5个元素都有“它们自己的按钮”,当单击时,该按钮将类添加回display:none 现在,当所有这些元素都不可见时,我希望其他一些元素也不可见。然后,当其中至少有一个元素可见时(没有显示:none),我希望其他元素也可见 为了完成任务,我尝试使用MutationObserver let my_observer = new Mut

比如说,我有5个html元素,它们通过隐藏,该类具有
显示:无
属性。 然后有一个按钮,每次点击(5次点击后,所有5个元素都可见)就会删除其中一个元素上的。 然后,所有这5个元素都有“它们自己的按钮”,当单击时,该按钮将类添加回
display:none

现在,当所有这些元素都不可见时,我希望其他一些元素也不可见。然后,当其中至少有一个元素可见时(没有显示:none),我希望其他元素也可见

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

let my_observer = new MutationObserver(function(mutations) {...}

elements_nodelist.forEach((my_element) => {
    observer.observe(my_element, {attributes: true, attributeFilter: ["class"]});
  })

但不幸的是,它只对任何类的更改做出反应,它不仅观察可见性状态,也只观察这个特定的类的更改。是的,我可以获取
突变.oldValue
信息并访问
元素.classList
,但我不知道如何使用它来解决所有问题。

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

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
}
const myHiddenElements=[…document.queryselectoral('.my hidden element');
const isAnyVisible=myHiddenElements.filter(elm=>elm.classList.contains('hidden-class')).length
如果您的目标是使其模块化,为什么不在组合按钮隐藏某个元素或该元素的按钮隐藏时触发自定义事件,两个处理程序都将发出
隐藏的
事件,您可以侦听该事件并处理其他元素的逻辑?@MuhammadTalhaAkbar如果我理解正确,您的意思是针对这些元素上的单击事件“隐藏”按钮,而不是在元素的类更改事件上?这很有意义,而且应该可以工作,因为所有类更改实际上都是在单击按钮的同时发生的。添加Chema关于.filter()方法的建议可以解决我当前的问题,谢谢:)只是我可以进一步添加其他按钮,如”一次隐藏所有元素”,我不想添加这个按钮的click事件处理程序,而是坚持使用突变观察者,在添加这样一个按钮的情况下,它不需要任何更改。