Question

这个问题类似于THIS ONE，但在阅读后我仍然无法解决我的问题。

基本上我试图让下面的表格变得动态。此外，当值更改时，我希望它更新基础JavaScript函数。

**但是，我无法弄清楚如何唯一地引用元素，并通过相关参数来更新对象。更改时会调用updatePlanner()，但传递的值始终是创建的最后一个唯一ID：在本例中为“2-11”。我究竟做错了什么？ **

这是我的初始对象：

builerObj.dataArray = [4,3,[[[5, .65, 0],[5, .75, 0],[5, .85, 1]], 
                            [[3, .70, 0],[3, .80, 0],[3, .90, 1]],
                            [[5, .75, 0],[3, .85, 0],[1, .95, 1]],
                            [[5, .40, 0],[5, .50, 0],[5, .60, 0]]]];

这是更新它的函数（请注意，我通过元素的Id来引用它的值）：

function updatePlanner(passedId, week, set, index) {
    var value = document.getElementById(passedId).value;

    // I've removed some irrelevant manipulation of the value variable

    builerObj.dataArray[2][week][set][index] = value;

        columns = $('#planBuilderWeeks')[0].value; // columns
        rows = $('#planBuilderSets')[0].value; // rows
        createPlanningTable(columns, rows);

}

这是表格生成器（删除了样式代码）：

function createPlanningTable(columns, rows){
    var body = document.getElementById('planBuilderTable'),
        tbl  = document.createElement('table');

    // Styling and Headers are here

    for(var i = 0; i < rows; i++){
        var tr = tbl.insertRow();
        var week = 0;

        for(var j = 0; j < columns * 3; j++){
            var td = tr.insertCell();
            var currID = i.toString() + "-" + j.toString(); // Unique ID for each input

            if (j % 3 == 0 ){              // This handels all columns labeled '%Max'
                var currItem = document.createElement('input');
                currItem.value = builerObj.dataArray[2][week][i][0];
                currItem.addEventListener("change", function(){
                     updatePlanner(currID, week, i, 0); // This is where I haven't been able to make it work
                }, false);
            } else if (j % 3 == 1){        // This handels all columns labeled 'Reps'
                var currItem = document.createElement('input');
                currItem.value = builerObj.dataArray[2][week][i][1];
            } else if (j % 3 == 2){        // This handels all columns labeled '+'
                var currItem = document.createElement('button');
                currItem.style.display = "block";
                var span = document.createElement('span');
                if (builerObj.dataArray[2][week][i][2] == 1){
                    span.className = "glyphicon glyphicon-ok box";
                } else{
                    span.className = "glyphicon box";
                }
                currItem.appendChild(span);
                week += 1;
            } else {
                alert("Something went wrong");
            }

            currItem.setAttribute("id", currID);   
            td.appendChild(currItem);
        }
    }
    body.innerHTML = "";
    body.appendChild(tbl);
}

Answer 1

在执行侦听器时评估currID。那时，currID已经达到了它的最后一个值。您可以将值传递给updatePlanner，而不是传递id，如下所示：

function updatePlanner(value, week, set, index) {

然后呼叫是：

updatePlanner (this.value, week, i, 0);

但请注意，那个周＆＃39;和＆＃39;我＆＃39;也已经达到了他们的最后价值。我注意到你在updatePlanner函数中使用了JQuery。 JQuery＆＃34; .on＆＃34;功能可以为您记住正确的值。这是解决方案：

         if (j % 3 == 0 ){ 
             var currItem = document.createElement('input');
             var eventData = { week : week, set : i };
             $(currItem).on("change", null, eventData, function(event){
                 updatePlanner(event.target.value, event.data.week, event.data.set, 0);
             });

Answer 2

您也可以使用Closures，因此您无需更改HTML。

function updatePlannerEvent( currId, week, i ) {
    return function() {
        updatePlanner(currId, week, i, 0);
    }
}

currItem.addEventListener("change", updatePlannerEvent(currId, week, i), false);

如何将JavaScript的addEventListener传递给动态创建的变量

2 个答案: