我需要使用相同的 JS 代码，但它不起作用

Question

我有一个仅在选中复选框后才出现的代码块，但该块位于 foreach 内，它会重复多次。当我单击复选框时，第一个有效，第二个重复不再有效。 我该如何解决？

<div class="col-md-12 form-group mb-3" id="2">Adicionar 2ª cor  <input type="checkbox" id="isChecked_3"/></div>
                            <div id="cor4" style="display:none;">
                                <div class="col-md-12 form-group mb-3">
                                    <label for="sel5"><h6>Selecionar Cor 2:<h6></label>
                                        <select class="form-control" id="sel5" name="{{ $proposedphase->id_proposedphase.'arm_color_2'}}">
                                            <option value="0">Selecionar Cor</option>
                                                @foreach ($colors as $color)
                                                    <option value="{{ $color->id_color }}">{{ $color->name }}</option>
                                                @endforeach
                                        </select>
                                </div>

<script>
$(document).ready(function(){
                $('#isChecked_3').change(function(){
                    if($(this).prop('checked')){
                        $('#cor4').show();
                    } else {
                        $('#cor4').hide();
                    }
                    
                });
            });
</script>

Answer 1

id 在页面上必须是唯一的。您正在对所有受影响的<DIV> 元素使用id="cor4"，所以您很幸运能够有任何工作。您可以更改某个课程的 id 并进行处理，但您仍然遇到将 id 应用于您的 <select> 元素的问题。

<div class="col-md-12 form-group mb-3" id="2">Adicionar 2ª cor  <input type="checkbox" id="isChecked_3"/></div>

                            <!-- Change id to class here -->
                            <div class="cor4" style="display:none;">
                                <div class="col-md-12 form-group mb-3">
                                    <label for="sel5"><h6>Selecionar Cor 2:<h6></label>
                                        <select class="form-control" id="sel5" name="{{ $proposedphase->id_proposedphase.'arm_color_2'}}">
                                            <option value="0">Selecionar Cor</option>
                                                @foreach ($colors as $color)
                                                    <option value="{{ $color->id_color }}">{{ $color->name }}</option>
                                                @endforeach
                                        </select>
                                </div>

<script>
$(document).ready(function(){
                $('#isChecked_3').change(function(){
                    if($(this).prop('checked')){

                        // Change id selector to class selector here...
                        $('.cor4').show();
                    } else {

                        // ...and here
                        $('.cor4').hide();
                    }
                    
                });
            });
</script>