Javascript 我的按钮（EventListener）只有有限的点击

我正在制作一个模式，所以我做了一个简单的例子，程序运行，当我点击任何按钮时，模式会显示，页面也会显示，但它只会显示特定的页面取决于按钮，在这种情况下，uno按钮用于第1页，dos用于第2页，tres用于第3页

一切都在我想去的地方，直到我点击了所有的按钮，只是为了向你展示我的问题，试着一步一步地从uno点击到tres，然后再次点击uno，就这样，页面根本不会改变

你能找出我的密码有什么问题吗

文件
.基站{
浮动：左；
}
.莫代尔{
显示：无；
背景色：浅绿色；
浮动：对；
宽度：400px；
高度：600px；
}
.第1页{
位置：绝对位置；
显示：无；
背景颜色：白肋木；
利润率：20px；
宽度：400px；
高度：150像素；
}
.p1{
边框：2倍纯红；
}
.p2{
边框：2件纯蓝；
}
.p3{
边框：2倍纯绿；
}
单击按钮以显示模态

联合国组织
磁盘操作系统
特雷斯
情态动词
第1页
第2页
第3页
var btn=document.querySelectorAll（'.myBtn'）；
var getModal=document.querySelector（'.modal'）；
var getPages=document.querySelectorAll（'.page1'）；
//console.log（getPages）；
for（设i=0；i{showmodel（）；getId（）；displayPage（）}）；
}
函数showmodel（）{
getModal.style.display=“块”；
}
函数getId（）{
//日志（event.target.id）；
}
函数displayPage（）{
var btnId=event.target.id；
如果（btnId==“uno”）{
getPages[0]。style.display=“block”；
}否则如果（btnId==“dos”）{
getPages[1].style.display=“block”；
}否则如果（btnId==“tres”）{
getPages[2].style.display=“block”；
}
}

当您触发其中一个模式页面的显示时，您没有隐藏其他模式页面，因此，单击所有按钮后，所有模式页面都会同时显示，并且具有最高

z索引的模式页面（在这种情况下，由标记中的元素顺序自动确定）覆盖所有其他模式页面。根据是否为当前模式页面，将
display
属性设置为
block
或
none
。您还可以将模式页面的索引传递给
displayPage（）
函数，这样就不需要那些if语句来检查按钮文本


var btn=document.querySelectorAll（'.myBtn'）；
var getModal=document.querySelector（'.modal'）；
var getPages=document.querySelectorAll（'.page1'）；
//console.log（getPages）；
for（设i=0；i{
showModal（）；
显示页面（一）
});
}
函数showmodel（）{
getModal.style.display=“块”；
}
功能显示页面（页面索引）{
var btnId=event.target.id；
forEach（函数（modalPage，index）{
getPages[index].style.display=index==pageIndex？“块”：“无”；
});
}
.btns{
浮动：左；
}
.莫代尔{
显示：无；
背景色：浅绿色；
浮动：对；
宽度：400px；
高度：600px；
}
.第1页{
位置：绝对位置；
显示：无；
背景颜色：白肋木；
利润率：20px；
宽度：400px；
高度：150像素；
}
.p1{
边框：2倍纯红；
}
.p2{
边框：2件纯蓝；
}
.p3{
边框：2倍纯绿；
}
单击按钮以显示模态

联合国组织
磁盘操作系统
特雷斯
情态动词
第1页
第2页
第3页
问题在于您的显示功能。要显示新页面时，必须隐藏其他页面。因此，将此函数添加到代码中

函数hidealPages（）{
getPages[0]。style.display=“无”；
getPages[1].style.display=“无”；
getPages[2]。style.display=“无”
}           
}

然后将其称为displayPage函数的第一行

函数
//先隐藏所有页面
HidealPages（）；
var btnId=event.target。
如果（btnId==“uno”）{
getPages[0]。style.display=“block”
}否则如果（btnId==“dos”）{
getPages[1]。style.display=“block”
}否则如果（btnId==“tres”）{
getPages[2]。style.display=“block”
}
}

您还可以为代码提供一些基本结构，如：


保存页面id或（更好的解决方案）在html结构中使用数据-*（Exp.data page id=“uno”）获取页面id，并使用页面按钮的listen to click事件在js中检索它，然后使用getAttribute函数查看要显示的页面

我希望它能有所帮助：）
对于不必要的代码，例如函数getId（）和div中的类，例如p1等，我忘记了删除它们，您没有隐藏其他页面（显示指定页面时），因此最后一页
p3
始终位于顶部，因为
位置：绝对在CSS中。我明白了，非常感谢。很抱歉这个愚蠢的问题，我仍然不知道这意味着什么？getPages[index].style.display=index==pageIndex？“块”：“无”；我迷路了=索引===页面索引？我不知道这里发生了什么。这是一个所谓的三元运算符，是if（index==pageIndex）{getPages[index].style.display=“block”}else{getPages[index].style.display=“none”}
的缩写，因此表达式的左侧是条件，问号和冒号之间的中间是条件真实时发生的情况，右边是条件虚假时发生的情况