基于相同模板的不同代码段;t产生相同的结果

Differents pieces of code based on same template don't produce the same result

本文关键字：结果 代码 于相同      更新时间：2023-09-26

在我项目的一个页面中，我有一个iten列表，其中对于列表中的每个项目，都有以下代码：

    <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>

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

有人能看出我做错了什么吗？

ps.：此页面的完整代码如下：

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

如果这段代码被写了多次，您将得到多个具有相同id"data_inicial"或"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'],
    });

你的时间挑剔者也是如此。。。

在第38行链接到的代码中，您正在使用<c:forEach var="item" items="${lista}">迭代多个项目。在foreach中，您将创建许多具有id属性的标记，这些属性最终具有相同的值。HTML中的id属性在页面上必须是唯一的。

如果您想在几个输入字段上使用jQueryUI的日期选择器，那么让这些字段具有class属性，并将其用作选择器，而不是您现在使用的id选择器。

例如更改：

<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>

至

<tr>
    <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>
</tr>

并更改脚本标签中使用的选择器：

 $('.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'],
    });
相关文章：