JS无法正常控制div显隐导致保险报价表单跳转异常问题求助

问题修复方案 #

核心错误原因 #

• JS语法错误：两个函数的最后一个分支错误使用else(条件)写法，正确语法应为else if(条件)。非法语法导致JS逻辑判断完全失效，直接执行最后一个分支代码，所以会直接跳转到autoquote页面，严重时会导致函数整体无法运行。
• nextForm函数的customerinfo分支逻辑错误，当前代码没有执行跳转到autoquote的操作，停留在当前页面。
• 额外HTML错误：客户信息页的「自有/租房」单选框name属性不一致，无法实现互斥选择，需统一为同一个name值。

修正后代码 #

1. 修复后的JS代码

/*eslint-env es6*/
// 全局存储用户选中的报价类型，后续可用来判断跳转对应报价表单
let selectedQuoteTypes = [];

function nextForm(){
    // 获取页面元素
    const quoteselection = document.getElementById('quoteselection');
    const customerinfo = document.getElementById('customerinfo');
    const autoquote = document.getElementById('autoinsquote');
    const nextBtn = document.getElementById('nextbtn');
    const backBtn = document.getElementById('backbtn');
    
    // 判断当前页面
    if(quoteselection.style.display === 'block') {
        // 第一步：保存用户选中的报价类型，后续可扩展跳转对应表单
        selectedQuoteTypes = [];
        if(document.getElementById('autoquote').checked) selectedQuoteTypes.push('auto');
        if(document.getElementById('homequote').checked) selectedQuoteTypes.push('home');
        if(document.getElementById('rentquote').checked) selectedQuoteTypes.push('rent');
        
        // 跳转到客户信息页
        backBtn.style.display = 'block';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'block';
        autoquote.style.display = 'none';
    } else if(customerinfo.style.display === 'block') {
        // 跳转到对应报价表单，这里示例先跳车险，后续可根据selectedQuoteTypes判断跳房屋/租客表单
        backBtn.style.display = 'block';
        nextBtn.style.display = 'none';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'none';
        autoquote.style.display = 'block';
    } else if(autoquote.style.display === 'block') {
        // 最后一页隐藏下一步按钮
        nextBtn.style.display = 'none';
    }
}

function backForm() {
    const quoteselection = document.getElementById('quoteselection');
    const customerinfo = document.getElementById('customerinfo');
    const autoquote = document.getElementById('autoinsquote');
    const nextBtn = document.getElementById('nextbtn');
    const backBtn = document.getElementById('backbtn');
    
    if(quoteselection.style.display === 'block') {
        // 第一页隐藏返回按钮
        backBtn.style.display = 'none';
    } else if(customerinfo.style.display === 'block') {
        // 返回报价选择页
        backBtn.style.display = 'none';
        quoteselection.style.display = 'block';
        customerinfo.style.display = 'none';
        autoquote.style.display = 'none';
    } else if(autoquote.style.display === 'block') {
        // 返回客户信息页
        nextBtn.style.display = 'block';
        quoteselection.style.display = 'none';
        customerinfo.style.display = 'block';
        autoquote.style.display = 'none';
    }
}

2. HTML单选框修复

找到客户信息页的「自有/租房」单选框代码，修改为：

<label for="own">Own</label>
<input type="radio" id="own" name="residenceType" value="own">
<label for="rent">Rent</label>
<input type="radio" id="rent" name="residenceType" value="rent"><br>

后续扩展建议 #

如果需要根据用户勾选的报价类型展示不同表单，只需在customerinfo的下一步逻辑中判断selectedQuoteTypes数组里的内容，控制对应表单的显示隐藏即可，所有表单填写的内容在打印时都会保留，不需要服务端支持。

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