如何根据Gravity Forms按钮的display状态切换div显示隐藏？

我用Gravity Forms实现了提交按钮的条件显示/隐藏：

• 按钮显示时，代码为：<button class="button gform_button" id="gform_submit_button_1" style="">提交</button>
• 按钮隐藏时，代码为：<button class="button gform_button" id="gform_submit_button_1" style="display: none;">提交</button>

需求是：按钮隐藏（inline样式为display:none）时显示id="div1"的Div；按钮显示时隐藏该Div。

原代码的问题 #

• 条件判断错误：用赋值运算符=替代了比较运算符===，导致逻辑永远为真
• 未处理按钮显示时style为空的场景：此时x.style.display是空字符串，原else分支无法触发
• 缺少初始化执行和动态监听：页面加载时未自动执行逻辑，且Gravity Forms动态修改按钮样式时无法同步更新Div状态

修改后的完整实现 #

HTML部分

<div id="div1">This is a hidden div that we can show with JavaScript</div>

JavaScript部分

// 核心逻辑：根据按钮状态控制Div显示
function toggleDivBasedOnButton() {
    const submitBtn = document.getElementById('gform_submit_button_1');
    const targetDiv = document.getElementById('div1');
    
    // 判断按钮是否隐藏：inline样式为display:none则显示Div，否则隐藏
    if (submitBtn.style.display === 'none') {
        targetDiv.style.display = 'block';
    } else {
        targetDiv.style.display = 'none';
    }
}

// 页面加载完成后初始化状态，并监听按钮样式变化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化Div显示状态
    toggleDivBasedOnButton();
    
    // 监听按钮的style属性变化，适配Gravity Forms的动态修改
    const submitBtn = document.getElementById('gform_submit_button_1');
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'style') {
                toggleDivBasedOnButton();
            }
        });
    });
    
    observer.observe(submitBtn, { attributes: true });
});

关键修改说明 #

• 修正条件判断：使用===严格比较按钮的display样式
• 初始化执行：通过DOMContentLoaded事件，页面加载完成后立即设置Div的初始状态
• 动态监听：用MutationObserver监听按钮的style属性变化，确保Gravity Forms修改按钮状态时，Div能同步响应
• 兼容style为空场景：按钮显示时submitBtn.style.display为空字符串，自动进入else分支隐藏Div

内容的提问来源于stack exchange，提问作者joshmrodg