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

Posted 2023-03-05

【中文标题】我需要使用相同的 JS 代码，但它不起作用

【英文标题】：I need to use the same JS code but it is not working

【发布时间】：2021-04-18 23:22:42

【问题描述】：

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

【问题讨论】：

我认为这是因为$(document).ready 仅在文档​​准备好时触发一次。

@noob，你说得对，$document.ready() 只触发一次，但它设置了一个 change 事件处理程序，每次所选元素发生更改时都会触发。

嗨，你能显示for循环吗？和正确的html

【参考方案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>

【讨论】：

不，id 4 是唯一的，有 1、2、3、4 和 5，当它在 foreach 中运行时，第二个停止工作

好的 - id 可能是唯一的，但您发布的代码仍然只选择一个 id。如果您要告诉我您已经创建了许多不同的事件处理程序，那么您正在以错误的方式解决这个问题。您需要发布更多代码。