jQuery+PHP多步表单根据用户评分选择显隐子问题div功能失效咨询

现有代码问题排查 #

• 冗余的JSON格式转换：json_encode输出的结果本身就是合法JS对象，不需要再执行JSON.stringify+$.parseJSON的多余操作
• 未正确遍历子问题节点：子问题存储在父评分问题的SubQuestion字段中，当前遍历逻辑只处理了一级问题数组，没有读取子问题配置
• 缺少数值类型转换：评分输入框取到的值是字符串类型，直接做大小比较会出现逻辑异常
• 子问题无默认隐藏状态：页面加载后所有子问题默认可见，不符合交互要求
• 显隐逻辑不完整：只有隐藏逻辑，没有对应展示对应子问题的逻辑，也没有先重置所有子问题状态的步骤

修复后的代码 #

1. HTML渲染部分调整 #

给子问题外层div添加默认隐藏的类，避免加载时直接显示：

<?php 
foreach($arr as $records) {?>
<div class="card b-0">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-md-11">
        <?php if($records['type']=="check_box" && $records['ISSubQuestion']=="1" ) { 
            $schools_array = explode("::", $records['options']);
            $result = count($schools_array);
        ?>
            <!-- 新增默认隐藏样式 -->
            <div id='<?php echo $records['ques_id']; ?>' style="display:none;">
                <div class="form-group checkboxes">
                    <label for="nm" class="form-control-label"><?php echo $records['question']; ?></label>
                    <div>
                    <?php foreach($schools_array as $s) { ?>
                        <label class="form-container"><?php echo $s; ?>
                            <input type='checkbox' value='<?php echo $s; ?>' name='check_<?php echo $records['ques_id']; ?>[]' />
                            <span class="checkmark"></span>
                        </label>
                    <?php } ?>
                    </div>  
                </div>  
            </div>  
        <?php } ?>
        </div>
    </div>
</div>
<?php } ?>

2. jQuery逻辑调整 #

<script>
$(document).ready(function(){
    $("#next1").click(function(){
        // 把评分转成数字类型避免比较异常
        var rating = parseInt($("#name").val());
        // 直接读取PHP输出的问题配置，无需多余格式转换
        var questionData = <?php echo json_encode($arr); ?>;
        // 先隐藏所有子问题重置状态
        $('div[id^="18"], div[id^="19"]').hide();
        // 遍历匹配评分父问题
        $.each(questionData, function(i, parentItem) {
            // 跳过非评分类父问题
            if(parentItem.IsRatingQuestion != 1) return;
            var minThreshold = parseInt(parentItem.min_value);
            // 按规则显示对应子问题
            if(rating <= minThreshold){
                $("#" + parentItem.show_ques_id).show();
            }else{
                $("#" + parentItem.max_show_ques_id).show();
            }
        });
    });
});
</script>

额外注意点 #

请确认评分输入框的ID是否为#name，如果不是请替换为实际的ID值即可。

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