javascript - 使用 jsp 中的循环向 javascript 发送请求时覆盖数据

Question

我正在使用循环多次创建布局，它请求 js 并从中获取数据。

• 我正在标签中设置数据。
• 每个标签都有唯一的 ID，因为它在循环时递增
• 我想在所有标签上设置数据，并且单击事件应该起作用独立地
• 例如我已循环布局两次/多次，并且数据应设置为两种布局。

问题

• 仅设置最后一个布局的标签。
• 每次日志显示最后一个布局 ID 时，我都检查了日志。

检查

• 在源代码中，我显示布局生成了两次，并且所有的都是唯一的id。
• 在日志中我显示它两次使用相同的最后一个布局 ID 来设置数据。

JSP 文件

<div align="center" class="container">

    <%!static int componentQty = 2;%>

    <%
        for (int i = 0; i < componentQty; i++) {
            String editc = "editContent" + i;
            String deletec = "deleteContent" + i;
            String buttonlist_div = "buttons" + i;
    %>
    <div class="content" style="width: 28%; float: left; margin: 50px; word-wrap: break-word;">
        <div class="row">
            <script type="text/javascript">

                var edit_input_ids = [ "adata<%=i%>", "bdata<%=i%>", "cdata<%=i%>", "ddata<%=i%>" ];
                var delete_input_ids = [ "a1data<%=i%>", "b1data<%=i%>", "c1data<%=i%>", "d1data<%=i%>" ];

                var editDatadiv = "editContent<%=i%>";
                var deleteDatadiv ="deleteContent<%=i%>"; 
                var buttonList = "buttons<%=i%>";
                var timerdiv = "time<%=i%>";

                $(document).ready(function() {

                    $('#'+editDatadiv).hide();
                    $('#'+deleteDatadiv).hide();
                    var lable_ids = [ "ablock<%=i%>", "bblock<%=i%>", "cblock<%=i%>", "dblock<%=i%>" ]; 
                    <%-- var servletname = "RandomDataGen"+<%=i%>; --%>
                    setup('RandomDataGen', '|', lable_ids,timerdiv);
                    setData();

                });
            </script>

            <div class="col-md-10" style="background-color: lavender;">

                <div class="row">
                    <div class="col-md-12 timeline">
                        <div class="col-md-6" id="time<%=i%>"></div>
                        <div class="col-md-6">
                            <h4>Overall Latency : 10</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" id="Labels">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-6"><h4>Name : </h4></div>
                                <div class="col-md-6">
                                    <h4>Name :</h4>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <h4>
                                        Block 1 : <label id="ablock<%=i%>" /></label>
                                    </h4>
                                </div>
                                <div class="col-md-6">
                                    <h4>
                                        Block 2 : <label id="bblock<%=i%>"></label>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-6">
                                    <h4>
                                        Block 3 : <label id="cblock<%=i%>"></label>
                                    </h4>
                                </div>
                                <div class="col-md-6">
                                    <h4>
                                        Block 4 : <label id="dblock<%=i%>"></label>
                                    </h4>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <div class="col-md-2" id="<%=buttonlist_div%>"
                style="background-color: green;">
                <div align="center">
                    <input class="button" type="button" id="editPopup"
                        onclick=getEditWindow(edit_input_ids,editDatadiv) value="Edit">
                </div>

                <div align="center">
                    <input class="button" type="button" id="deletePopup"
                        onclick=getDeleteWindow(delete_input_ids,deleteDatadiv)
                        value="Delete">
                </div>

                <div align="center">
                    <input class="button" type="button" id="Active/Inactive"
                        value="Active" onclick=changeStat(this,buttonList) />
                </div>
            </div>
        </div>

    </div>

    <div id="<%=editc%>" style="display: none;">
        <form>
            <input type="text" id="adata<%=i%>"> <input type="text"
                id="bdata<%=i%>" /> <input type="text" id="cdata<%=i%>" /> <input
                type="text" id="ddata<%=i%>" />

        </form>
    </div>

    <div id="<%=deletec%>" style="display: none;">
        <form>
            <input type="text" id="a1data<%=i%>"> <input type="text"
                id="b1data<%=i%>" /> <input type="text" id="c1data<%=i%>" /> <input
                type="text" id="d1data<%=i%>" />
        </form>
    </div>

    <%
        }
    %>
</div>

JAVASCRIPT 文件

function setup(servlet_url, separator, label_Id_names, timeDiv) {

    this.servlet_url = servlet_url;
    this.separator = separator;
    this.label_names = label_Id_names;
    this.timeDiv = timeDiv;

}

function setData() {

    $.post(servlet_url, function(data) {

        var dataArray = data.split(separator);
        var i;
        for (i = 0; i < label_names.length; i++) {
            console.log('lable names : ' + label_names[i]);
            var nextval = dataArray[i];

            $('#' + label_names[i]).html(nextval);

        }

    });
}

how should i avoid the overriding and make component independent of each other?

感谢您的宝贵时间。

Answer 1

我按照这种方式调用函数，它将为新组件生成一个新函数。每件事都是唯一的，因此没有机会覆盖。

var myFunctions = [];

function createMyFunction(i) {

    return function() {
        console.log("My value: " + i);
    };

}

for (var i = 0; i < 3; i++) {
    myFunctions[i] = createMyFunction(i);
}

for (var j = 0; j < 3; j++) {
    myFunctions[j]();    // and now let's run each one to see
}