WordPress Elementor中按钮隐藏时JS脚本失效问题求助

问题描述 #

在Elementor的HTML小部件中实现了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>

问题原因 #

当按钮被后端隐藏时，对应的DOM元素可能不存在或被移除，document.getElementById会返回null。原脚本直接给null绑定onclick事件，或者在toggleDivs里直接访问null的classList，会触发JavaScript错误，导致整个脚本停止执行。

修复方案 #

通过检查元素是否存在再执行操作，结合try-catch捕获可能的错误，避免脚本中断。修改后的代码会跳过不存在的按钮，只对存在的按钮绑定事件和操作状态。

修改后的完整代码 #

<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 btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");

var sect1 = document.getElementById("sect1");
var sect2 = document.getElementById("sect2");
var sect3 = document.getElementById("sect3");
var sect4 = document.getElementById("sect4");

// 给存在的按钮绑定点击事件
if (btn1) {
    btn1.onclick = function(event){
        event.preventDefault();
        toggleDivs("sect1", this);
    };
}

if (btn2) {
    btn2.onclick = function(event){
        event.preventDefault();
        toggleDivs("sect2", this);
    };
}

if (btn3) {
    btn3.onclick = function(event){
        event.preventDefault();
        toggleDivs("sect3", this);
    };
}

if (btn4) {
    btn4.onclick = function(event){
        event.preventDefault();
        toggleDivs("sect4", this);
    };
}

function toggleDivs(targetSectId, currentBtn){
    try {
        var targetSect = document.getElementById(targetSectId);
        if (!targetSect) return;

        // 如果当前按钮已激活，取消激活并隐藏区块
        if(currentBtn.classList.contains("btn_active_state")){
            targetSect.classList.remove("shown");
            currentBtn.classList.remove("btn_active_state");
            return;
        }

        // 移除所有存在按钮的激活状态
        if (btn1) btn1.classList.remove("btn_active_state");
        if (btn2) btn2.classList.remove("btn_active_state");
        if (btn3) btn3.classList.remove("btn_active_state");
        if (btn4) btn4.classList.remove("btn_active_state");

        // 隐藏所有存在的区块
        if (sect1) sect1.classList.remove("shown");
        if (sect2) sect2.classList.remove("shown");
        if (sect3) sect3.classList.remove("shown");
        if (sect4) sect4.classList.remove("shown");

        // 激活当前按钮并显示目标区块
        currentBtn.classList.add("btn_active_state");
        targetSect.classList.add("shown", "fade");
    } catch (e) {
        // 捕获错误，避免脚本中断，可根据需要打印错误信息
        console.log("操作出错:", e);
    }
}

// 初始化默认激活状态（如果需要）
// if (btn1 && sect1) {
//     btn1.click();
// }
</script>

说明 #

1. 先检查每个按钮和区块是否存在，再执行绑定事件或状态操作，避免null报错
2. 在toggleDivs函数外层添加try-catch，捕获意外错误，保证脚本不会因为单个元素问题全部失效
3. 移除了重复的targetSect.classList.remove("shown")代码，优化逻辑

内容的提问来源于stack exchange，提问作者Daan de Wilt