Javascript 如何管理同一页面中多次包含的相同代码的CSS选择器？

我经常创建在页面顶部使用传统选项卡的web应用程序。在这样做的时候，我有一个共同的问题，我一直无法找到一个优雅的解决方案

问题是用户可以在同一页面上的两个单独选项卡中加载相同的内容。这两个不同选项卡上的任何HTML ID都会发生冲突，导致任何引用其中一个ID的JavaScript在第二个选项卡上失败。此外，在这些页面中引用类的任何JavaScript都会影响所有选项卡上的元素，而我只希望它影响当前选项卡

例如，如果我在同一个页面中两次包含这段代码会怎么样

<style>
    #container { margin; 20px; }
    #message { background: red; }
</style>

<div id='container'>
    <span id='message'>This was from an include file</span>
    <button id='changeColorBtn'>Change color</button>
</div>

<script>
    $('#changeColorBtn').click(() => $('#message').css('background', 'blue'))
</script>

#容器{margin；20px；}
#消息{背景：红色；}
这是一个包含文件
变色
$（“#changeColorBtn”）。单击（（）=>$（“#消息”）.css（'background'，'blue'））

JSFIDDLE来说明问题：

我过去曾尝试或考虑过三种方法来解决这一问题：

我尝试使用PHP将页面id附加到包含内容中的每个元素。这会很快变得凌乱，而且写出来很烦人

我试着把每个标签都做成一个iframe。起初，这似乎效果不错，但很快就变成了一场管理噩梦，因为在同一页面上打开了许多iFrame，有时需要相互通信和共享数据。我遇到了许多问题，决定不再尝试这种方法

我曾考虑将包含内容的每个实例包装在一个具有唯一ID的元素中，但我决定会遇到与上述选项1类似的问题。每个CSS选择器都必须首先使用ID元素，这样会再次创建混乱的代码，并可能使用大量多深度JQuery选择器减慢页面速度。此外，在同一页面上仍然会有多个具有相同ID的元素（尽管我不确定这是否重要，因为每个选择器都应该包含一个父元素）

---

在HTML/CSS中，是否有我所缺少的元素或方法可以解决这个问题？

您必须在元素上使用一个类，而不是ID，该元素具有多次使用的相同样式，并且您希望在文档中使用相同的CSS样式规则来影响该元素

例如：

这是与第二段风格相同的第一段


这是与第一段风格相同的第二段

现在来谈谈影响文档中多次使用的同一类型元素的问题

因为在同一父元素下，span（message）和button是成对的，所以可以访问事件侦听器中循环的索引，以使用所选的nodelist标识正在按下的循环

我在节点列表上使用vanilla JS

querySelectorAll（）

。必须对具有相同标记名的多个元素使用类

我的目标是元素父类

let message=document.queryselectoral（'.content span'）

和

let btn=document.queryselectoral（'.content button'）

。然后通过forEach循环运行节点，并使用forEach循环中的索引向button元素添加eventlistener。尽管此索引是

btn

元素的索引，但由于这些元素是成对的，因此它将使用

btn

中的索引以正确的

消息

元素为目标

let btn=document.querySelectorAll（'.container按钮'）；
让message=document.querySelectorAll（'.container span'）；
btn.forEach（（按钮，i）=>{
//简言之。。。。
//每次循环迭代btn的节点列表时，它都会分配关键字
//“button”指向元素nodelist的迭代，因此当我们单击特定的
//‘按钮’指的是当时按下的按钮，而不是所有按钮
按钮。addEventListener（'单击'，（e）=>{
消息[i].style.backgroundColor='blue'；
})
})

.container span{
背景：红色；
}

这是一个包含文件
变色
这是一个包含文件
变色

您必须在元素上使用一个类而不是ID，该元素具有多次使用的相同样式，并且您希望在文档中使用相同的css样式规则来影响该样式

例如：

这是与第二段风格相同的第一段


这是与第一段风格相同的第二段

现在来谈谈影响文档中多次使用的同一类型元素的问题

因为在同一父元素下，span（message）和button是成对的，所以可以访问事件侦听器中循环的索引，以使用所选的nodelist标识正在按下的循环

我在节点列表上使用vanilla JS

querySelectorAll（）

。必须对具有相同标记名的多个元素使用类

我的目标是元素父类

let message=document.queryselectoral（'.content span'）

和

let btn=document.queryselectoral（'.content button'）

。然后通过forEach循环运行节点，并使用forEach循环中的索引向button元素添加eventlistener。尽管此索引是

btn

元素的索引，但由于这些元素是成对的，因此它将使用

btn

中的索引以正确的

消息

元素为目标

let btn=document.querySelectorAll（'.container按钮'）；
让message=document.querySelectorAll（'.container span'）；
btn.forEach（（按钮，i）=>{
//简言之。。。。
//每次循环迭代btn的节点列表时，它都会分配关键字
//“button”指向元素nodelist的迭代，因此当我们单击特定的