Javascript 如何制作多个文本覆盖图

我有以下的问题：我试图使倍数叠加，它只是不工作。它始终仅将最后一个显示为覆盖。即使当我按下第一个按钮或第二个按钮时输入不同的“id”-我将覆盖2，当我按下id“覆盖1”时，我永远看不到覆盖1如何使其工作

（）上的函数{ document.getElementById（“overla1”）.style.display=“block”； } 函数off（）{ document.getElementById（“overla1”）.style.display=“无”； } 关于（）的函数{ document.getElementById（“overlay2”）.style.display=“block”； } 函数off（）{ document.getElementById（“overlay2”）.style.display=“无”； }

#覆盖1{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本1{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
#覆盖层2{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本2{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

覆盖878文本
用文字覆盖
启用覆盖效果
覆盖2个文本
用文字覆盖
启用覆盖效果

问题在于，您在同一级别上使用相同的名称定义了多个函数。on（）和off（）的第二个定义切换覆盖2的可见性，并且由于它稍后出现在脚本中，它将覆盖控制覆盖1的第一个定义

要解决这个问题，只需定义这两个函数一次，并添加一个额外的参数，该参数将确定您是要切换overla1还是overla2

<button onclick="on(1)">Turn on overlay effect</button> // to toggle overlay1
<button onclick="on(2)">Turn on overlay effect</button> // to toggle overlay2
<div id="overlay1" onclick="off(1)"> // hide overlay1
<div id="overlay2" onclick="off(2)"> // hide overlay2

#覆盖1{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本1{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
#覆盖层2{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本2{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

覆盖878文本
用文字覆盖
启用覆盖效果
覆盖2个文本
用文字覆盖
启用覆盖效果

问题在于，您在同一级别上使用相同的名称定义了多个函数。on（）和off（）的第二个定义切换覆盖2的可见性，并且由于它稍后出现在脚本中，它将覆盖控制覆盖1的第一个定义

要解决这个问题，只需定义这两个函数一次，并添加一个额外的参数，该参数将确定您是要切换overla1还是overla2

<button onclick="on(1)">Turn on overlay effect</button> // to toggle overlay1
<button onclick="on(2)">Turn on overlay effect</button> // to toggle overlay2
<div id="overlay1" onclick="off(1)"> // hide overlay1
<div id="overlay2" onclick="off(2)"> // hide overlay2

#覆盖1{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本1{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
#覆盖层2{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本2{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

覆盖878文本
用文字覆盖
启用覆盖效果
覆盖2个文本
用文字覆盖
启用覆盖效果

这就是您想要实现的目标吗？

document.getElementById（'btn1'）。addEventListener（'click'，function（）{
document.getElementById（“overla1”）.style.display=“block”；
})
document.getElementById（'overla1'）。addEventListener（'click'，function（）{
document.getElementById（“overla1”）.style.display=“无”；
})
document.getElementById（'btn2'）。addEventListener（'click'，function（）{
document.getElementById（“overlay2”）.style.display=“block”；
})
document.getElementById（'overlay2'）。addEventListener（'click'，function（）{
document.getElementById（“overlay2”）.style.display=“无”；
})

#覆盖1{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本1{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
#覆盖层2{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
光标：指针；
}
#文本2{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

覆盖878文本
用文字覆盖
启用覆盖效果
覆盖2个文本
用文字覆盖
启用覆盖效果

这就是您想要实现的目标吗？