Javascript if语句不是'；t在第三个按钮单击时注册

在下面的片段中，当第一次单击按钮时，我希望所有div都淡出，除了它们后面的红色div。在随后的每次单击中，我想将下一个具有较高堆栈顺序的div的不透明度设置为

1

在第三次单击之前，此操作可以正常工作-此时不会发生任何事情：

document.querySelector（'button'）。addEventListener（'click'，button）；
设black=document.querySelector（'.black'），
蓝色=document.querySelector（'.blue'），
绿色=document.querySelector（'.green'），
红色=document.querySelector（'.red'）；
black.style.opacity=1；blue.style.opacity=1；
green.style.opacity=1；red.style.opacity=1；
功能按钮（）{
让blackStyle=black.style，
blueStyle=blue.style，
greenStyle=green.style，
redStyle=red.style；
if（blackStyle.opacity==1）{
blackStyle.opacity=0；
blueStyle.opacity=0；
greenStyle.opacity=0；
redStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 1 registed（再次）'；
}
else if（redStyle.opacity==1）{
greenStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 2 registed（再次）'；
}  
else if（greenStyle.opacity==1）{
//这不管用
blueStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 3 registed（再次）'；
}    
}

*{框大小：边框框；边距：0；填充：0；}
html，正文{高度：100%；}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
按钮{
位置：绝对位置；
边界半径：10雷姆；
宽度：10雷姆；
高度：10雷姆；
背景色：#e23；
过渡特性：不透明度；
过渡时间：0.25s；
}
.green{变换：比例（0.8）；背景色：#3e5；}
.blue{变换：比例（0.5）；背景色：#2af；}
.black{变换：比例（0.1）；背景色：#222；}
钮扣{
转化：translateX（-25%）；
左：12.5%；
边框样式：无；
边界半径：1em；
宽度：自动；
高度：自动；
填充：0.75rem；
背景色：#000；
颜色：#fff；
光标：指针；
}
按钮：悬停{背景色：#444；}

（再次）单击此处

您的问题是，第二个

else if

永远无法到达，因为

redStyle.opacity

保持在

1

，第三个检查只有在其他

if

为false时才会被检查。如果在

redStyle.opacity

之前添加If for

greenStyle.opacity

，则该选项有效

document.querySelector（'button'）。addEventListener（'click'，button）；
设black=document.querySelector（'.black'），
蓝色=document.querySelector（'.blue'），
绿色=document.querySelector（'.green'），
红色=document.querySelector（'.red'）；
black.style.opacity=1；blue.style.opacity=1；
green.style.opacity=1；red.style.opacity=1；
功能按钮（）{
让blackStyle=black.style，
blueStyle=blue.style，
greenStyle=green.style，
redStyle=red.style；
if（blackStyle.opacity==1）{
blackStyle.opacity=0；
blueStyle.opacity=0；
greenStyle.opacity=0；
redStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 1（再次）'；
}
else if（greenStyle.opacity==1）{
//这不管用
blueStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 3（再次）'；
}    
else if（redStyle.opacity==1）{
greenStyle.opacity=1；
document.querySelector（'button'）。innerHTML='click 2（再次）'；
}  
}

*{框大小：边框框；边距：0；填充：0；}
html，正文{高度：100%；}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
按钮{
位置：绝对位置；
边界半径：10雷姆；
宽度：10雷姆；
高度：10雷姆；
背景色：#e23；
过渡特性：不透明度；
过渡时间：0.25s；
}
.green{变换：比例（0.8）；背景色：#3e5；}
.blue{变换：比例（0.5）；背景色：#2af；}
.black{变换：比例（0.1）；背景色：#222；}
钮扣{
转化：translateX（0%）；
左：12.5%；
边框样式：无；
边界半径：1em；
宽度：自动；
高度：自动；
填充：0.75rem；
背景色：#000；
颜色：#fff；
光标：指针；
}
按钮：悬停{背景色：#444；}

再次单击此处