Javascript 如何创建用不同ID交换div的函数？

我试图在js中创建一个函数，使用.style.display=“none”或“block”交换网页内容，但主要问题是，没有几个不同的div具有不同的id。这样做的主要目的是在单击特定按钮后更改内容，而不加载新页面。对我来说，最大的问题是创建将更改“id”的脚本 与之前的id无关。通常我可以一个接一个地写所有的id，然后交换它们，但事实并非如此。内容应该自动更改，所以无论之前的id是什么，按下按钮后都会替换为特定的id

我尝试过使用

querySelector

的多种方法，通过使用remove/set属性将

id

更改为

class

，但这些方法都不适用于我。我花了两周的时间来写这封信，但我没有任何想法

我担心引导类可能会导致此问题

有人能帮我吗？有什么建议吗

这是我在这里的第一篇帖子，所以如果我做错了什么，很抱歉

---

我无法将我的代码粘贴到这里，因为所有东西都在我完成工作时离开的公司笔记本电脑上。

这里是一种不可知的方法，使用no

HTML

id

s或

class

es

const container=document.querySelector（'.container'）；
const buttons=container.queryselectoral（'button'）；
constdivs=container.querySelectorAll（':scope>div'）；
函数handleButtonClick（）{
this.previousElementSibling.classList.toggle（'hide'）；
}
按钮。forEach（按钮=>{
按钮。addEventListener（'click'，handleButtonClick）；
});
.container{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：20px；
}
.隐藏{
显示：无；
}

Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的朋友，我的朋友。”。第三条因债务而产生的债务，应为合理的债务

切换内容
Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的朋友，我的朋友。”。第三条因债务而产生的债务，应为合理的债务

切换内容
Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的朋友，我的朋友。”。第三条因债务而产生的债务，应为合理的债务

切换内容
Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的朋友，我的朋友。”。第三条因债务而产生的债务，应为合理的债务

切换内容
Lorem ipsum dolor sit amet，奉献精英。这句话的意思是：“我的朋友，我的朋友。”。第三条因债务而产生的债务，应为合理的债务

切换内容
你的不可知论方法有点“危险”（特别是
这一部分。以前的元素同级
部分），这个想法还可以，但是
按钮可以是页面上的任何按钮：）我看到你使用了
divs
，但你从未在搜索时过滤它们。一个快速修复方法是也使用
（'.container>div>按钮）
，但也
.container
太笼统了。@RokoC.Buljan我用最简单、最直接的方式回答了这个问题。我不想用太多细节压倒提问者。我们在这里编写的许多代码都是概念性的。不过，我同意你在
按钮上的意见，并将解决这个问题。请看：这就是我解决问题的方法。我还确保不会切换上下文
，而是切换最终可能包含多个段落、标题等的块
。此外，在使用
:scope
选择器时要小心。感谢您的回复！我真的很感激。我将在明天添加我最努力的一段代码。我需要仔细分析你的想法，因为这对我来说有点复杂。几个月前，我刚开始了我的编码冒险，现在我正在创建公文包。。。所以我的经验不是特别大。