如何制作一个按钮来禁用类中的元素答案

【问题标题】：How to make a button to disable elements in a class如何制作一个按钮来禁用类中的元素
【发布时间】：2021-04-24 05:01:51
【问题描述】：

我正在尝试为 wordpress 中的投资组合网站创建一个过滤系统（使用 Divi Builder），并且希望能够制作一个按钮/按钮来将页面上具有特定类的元素设置为 display: none 当按钮被点击。如果有人对如何做到这一点有任何想法，将非常感激。

谢谢

【问题讨论】：

您无法使用 Javascript 来实现这一点吗？我相信 JS 函数可以做到这一点。

标签： html css wordpress button divi

【解决方案1】：

如果您可以使用 jQuery，则 .show() 和 .hide() 函数适用于 jQuery 对象。
例如$('.dataholder').hide().filter( (index,element) => $("body").innerHTML == "abc" ).show() 将隐藏所有具有类 dataholder 的节点，然后显示那些包含 abc 的节点。

否则你必须使用类似的东西

element = document.querySelector('#dataholder')
element.style.display = 'none'

或者

elements = document.querySelectorAll('.dataholder')
elements.forEach( element => element.style.display = 'none' )

【讨论】：

感谢您的支持，我已尝试按照您的建议和一些教程进行操作。我已经这样做了，但不确定为什么它不起作用。对我做错了什么有任何想法吗？ <script> function uxFunction() { document.querySelectorAll("#dreamseeds, #angelaart, #sdc, #ytv, #intime, #wherenext").style.display = "block"; document.querySelectorAll("#airdesk, #prints, #notebook, #markets, #corporart, #recipe").style.display = "none"; } </script>
您必须使用 querySelector 或 forEach。 querySelectorAll 产生多个对象，js 不支持像这样设置包含对象的单个属性。 document.querySelectorAll("#dreamseeds, #angelaart, #sdc, #ytv, #intime, #wherenext").forEach( element => element.style.display = "block" );
如果可以的话，我真的会推荐你使用 jquery。对于初学者来说，这会让一些事情变得更容易。