如何使用jQuery控制PHP动态生成的div按对应单选按钮选择显隐

问题根因 #

• 循环生成的DOM元素存在重复ID，HTML规范要求ID全局唯一，使用ID选择器绑定事件只会生效在第一个匹配的元素上
• 原有DOM查找逻辑错误：next() 只能匹配当前元素的直接同级节点，单选按钮嵌套在容器内部，和下方需要控制显隐的div不存在直接同级关系，导致选择范围异常，作用到所有匹配的div上

第一步：修复PHP代码的重复ID问题 #

把循环内的ID都加上循环索引$i保证全局唯一，关键修改部分如下：

<?php for ($i = 0; $i < $data['partsCount']; $i++) :?>
<!-- 前面的代码保持不变 -->
<div class="row">
    <div class="col">
        <div class="custom-control custom-radio custom-control-inline">
            <!-- 单选ID加上索引 -->
            <input type="radio" id="status1-<?php echo $i; ?>" name="status[]" class="custom-control-input" value="2" checked>
            <label class="custom-control-label" for="status1-<?php echo $i; ?>">Aprovado</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="status2-<?php echo $i; ?>" name="status[]" class="custom-control-input" value="3">
            <label class="custom-control-label" for="status2-<?php echo $i; ?>">Reprovado</label>
        </div>
    </div>
</div>
<div id="rejected-<?php echo $i; ?>" class="row my-4">
    <div class="col">
        <label for="desc">Motivo para a não aprovação do orçamento</label>
        <!-- 编辑器ID加上索引 -->
        <textarea name="reject_notes[]" id="editor1-<?php echo $i; ?>" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
    </div>
</div>
<div id="accepted-<?php echo $i; ?>" class="row my-4">
    <div class="col-4">
        <label for="data_out">Data de Entrega</label>
        <div class="form-group">
            <div class="input-group input-group-lg date">
                <input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?php echo $i; ?>" />
                <div class="input-group-append">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <label for="desc">Caminho para as artes</label>
        <input type="text" class="form-control" name="path_files[]" id="">
        <label for="desc">Caminho para a PM/RM</label>
        <input type="text" class="form-control" name="path_pm[]" id="">
        <label for="desc" class="mt-3">Descritivo e orientações de criação</label>
        <!-- 编辑器ID加上索引 -->
        <textarea name="accept_notes[]" id="editor2-<?php echo $i; ?>" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
    </div>
</div>
<?php endfor;?>

第二步：替换原有jQuery代码 #

改用类选择器绑定事件，通过DOM相对查找定位当前区块需要控制的div：

// 页面初始化：默认隐藏所有驳回区块
$('div[id^=rejected]').hide();

// 绑定所有单选按钮的change事件
$('input[name="status[]"]').change(function () {
    // 找到当前单选所在的行容器
    const $currentRadioRow = $(this).closest('.row');
    // 查找当前行后面同级的对应显隐区块
    const $rejectedBlock = $currentRadioRow.nextAll('div[id^=rejected]:first');
    const $acceptedBlock = $currentRadioRow.nextAll('div[id^=accepted]:first');
    
    // 根据选中值切换显隐
    if ($(this).val() == '2') {
        $acceptedBlock.show('slow');
        $rejectedBlock.hide('slow');
    } else if ($(this).val() == '3') {
        $acceptedBlock.hide('slow');
        $rejectedBlock.show('slow');
    }
});

修改后会根据点击的单选按钮，仅查找当前区块对应的两个控制div，不会影响其他循环生成的区块，同时修复了重复ID的HTML规范问题，避免后续其他功能出现异常。

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