时间戳

首页 > 解决方案 > 我需要使用相同的 JS 代码，但它不起作用

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

问题描述

我有一个仅在选中复选框后才出现的代码块，但是该块位于 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>

标签： javascriptphphtmllaravelbootstrap-4

解决方案

一个id在页面上必须是唯一的。你正在使用id="cor4"所有受影响的<DIV>元素，所以你很幸运能有任何工作。您可以更改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>

推荐阅读