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

Posted

技术标签:

【中文标题】我需要使用相同的 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 在页面上必须是唯一的。您正在对所有受影响的&lt;DIV&gt; 元素使用id="cor4",所以您很幸运能够有任何工作。您可以更改某个课程的 id 并进行处理,但您仍然遇到将 id 应用于您的 &lt;select&gt; 元素的问题。

<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。如果您要告诉我您已经创建了许多不同的事件处理程序,那么您正在以错误的方式解决这个问题。您需要发布更多代码。

以上是关于我需要使用相同的 JS 代码,但它不起作用的主要内容,如果未能解决你的问题,请参考以下文章