javascript - 基于同一模板的不同代码片段不会产生相同的结果

Question

在我的项目的一个页面中，我有一个 itens 列表，其中对于列表中的每个项目，都有这段代码:

    <div id="edit_evento_${item.id}_2" class="row">
        <form method="post" action="<c:out value="${pageContext.request.contextPath}/evento/altera_evento"/>" id="target">
        <input type="hidden" name="id" value="${item.id}">
        <div class="col-md-3">
            Edi&ccedil;&atilde;o de evento
        </div>
        <div class="col-md-6">
            <table id="hor-minimalist-a">
                <thead>
                    <tr>
                        <th>Atributo</th>
                        <th>Valor</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td> Nome: </td>
                        <td><input type="text" name="nome" value="${item.nome}" size=20 maxlength=40> </td>
                    </tr>

                    <tr>
                        <td> Descri&ccedil;&atilde;o: </td>
                        <td><input type="text" name="descricao" value="${item.descricao}" size=30 maxlength=100> </tdv>
                    </td>

                    <tr>
                        <td> <h3>Periodo da Data</h3> </td>
                        <td>
                            <table>
                                <tr>
                                    <td>inicio: <input type="text" id="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
                                    <td>final: <input type="text" id="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td> <h3>Periodo do Hor&aacute;rio</h3> </td>
                        <td>
                            <table>
                                <tr>
                                    <td>inicio: <input type="text" id="hora_inicial" name="hora_inicial" value="${item.horaInicial}"/> </td>
                                    <td> final: <input type="text" id="hora_final" name="hora_final" value="${item.horaFinal}"/> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td> Dura&ccedil;&atilde;o: </td>
                        <td><input type="text" name="duracao" value="${item.duracao}" size=20 maxlength=2> Minutos </td>
                    </tr>

                    <tr>
                        <td> </td>
                        <td> <div id="result"></div> </td>
                    </tr>
                </tbody>

                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-lg btn-primary">Salvar</button> <br/>
        </div>
        </form>
    </div>

与此代码相关，我有以下 Jquery 代码，该代码针对列表中的每个项目执行:

<script type="text/javascript">
    $(function(){
        $('#data_inicial').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],

        });
        $('#data_final').datepicker({
            inline: true,
            showOtherMonths: true,
            dateFormat: 'dd/mm/yy',
            dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        });
        $('#hora_inicial').timepicker();
        $('#hora_final').timepicker();
    });
</script>

我的问题是，只有列表的第一项具有表单每个元素的预期行为。另一个既不打开日期/时间选择器，也不捕获提交操作的输出并将其显示在正确的 中。

任何人都可以看到我做错了什么吗？

ps.:该页面的完整代码是这样的:

https://github.com/klebermo/webapp_horario_livre/blob/master/WebContent/WEB-INF/jsp/evento/lista.jsp

Answer 1

如果多次写入该代码段，您最终会得到多个具有相同 id“data_initial”或“data_final”的项目。除了会产生无效的 HTML 之外，它还会导致 jQuery 仅运行一次，因为 jQuery 将查找具有该 ID 的单个唯一项。

您应该将 ID 替换为同名的类

<td>inicio: <input type="text" class="data_inicial" name="data_inicial" value="<c:out value="${item.dataInicial}"/>"/> </td>
<td>final: <input type="text" class="data_final" name="data_final" value="<c:out value="${item.dataFinal}"/>"/> </td>

并用点更改 jQuery 代码中的哈希值:

    $('.data_inicial').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd/mm/yy',
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],

    });
    $('.data_final').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd/mm/yy',
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
    });

时间选择器也是如此......