我有4个按钮，每个按钮打开一个部分，并关闭其他。有一种可能性，一个或按钮是保持隐藏，因为在后端的开关，你可以切换，使其可见（或隐藏）。
现在，如果一个或多个按钮不可见，脚本将停止工作。如果我打开所有按钮，按钮将显示，脚本将工作。
我有这个代码，它的工作很好（只要所有的按钮都可见）：
<style>
.elementor-editor-active .hidden {
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
.btn_active_state{
background-color: #FFCC00 !important;
}
.btn_active_state a{
font-weight: bold !important;
}
</style>
<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3",this);
};
btn4.onclick = function(event){
event.preventDefault();
toggleDivs("sect4",this);
};
function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn4.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>当我将一个或多个按钮切换到OFF时，脚本停止工作（这样它们就不会显示在前端）。我看到了使用Try Catch方法的解决方案，但我不知道（如果这是正确的解决方法），在哪里实现它...
我在Wordpress中使用Elementor来完成这个任务。（HTML小部件，我在其中粘贴了这段代码，并将部分和按钮命名为代码中命名的名称）。
旁注：我不是JavascriptMaven。
谢谢！
2条答案
按热度按时间ar5n3qh51#
好的。我已经完成了。你可以通过添加到按钮列表来轻松扩展它（在文档的顶部）。这是一个创建按钮，动作和部分的系统。它允许你在它们之间切换，本质上就像标签一样。它可能不是最好的实现，但它是一个工作系统，可以开始使用。它将视图与按钮分离，两个函数来控制每一个的状态。一个是控制按钮，另一个是视图。这应该是你前进的方法...保持愚蠢的简单。避免复杂，拥抱可读性。如果你想让代码超紧凑和“高效”，使用webpack：D
db2dz4w82#
调用toggleDivs（）时，我用btn变量本身替换了'this'，所以不要使用toggleDivs（“sect1”，this），而是使用toggleDivs（“sect1”，btn1）