Question

function add(obj) {
    for (var i = 0; i < obj.length; i++) {
        var elements = Object.keys(obj[i]);
        var host = obj[i].host;
        for (var key in obj[i]) {
            if (key === "host")
                continue;
            else {
                $("#table").append('<tr id=' + key + host.replace(/\./g, "") + '><th>' + key + '</th><td>' + host + '</td></tr>');
                var id = key + host.replace(/\./g, "");
                for (var j = 0; j < obj[i][key].length; j++) {
                    var cellId = id + Object.keys(timeList[j]).toString().split(" ").join("-").replace(/:/g,"-");
                    var list = obj[i][key][j];
                    var flag = aggregateTags(list);
                    if (flag == "OKAY")
                    $("#" + id).append('<td><img id ='+cellId+' src="/static/img/dashboard_green.gif" style="padding-top: 20px"></td>');
                    else if (flag == "WARNING")
                    $("#" + id).append('<td><img id ='+cellId+' src ="/static/img/dashboard_yellow.gif" style="padding-top: 20px"></td>');
                    else
                    $("#" + id).append('<td><img id ='+cellId+' src ="/static/img/dashboard_red.gif" style="padding-top: 20px"></td>');
                    $("#"+cellId).click(function(){ console.log(" i clicked on " +this.id);show(list)});
                }
            }
        }
    }
}

此函数基本上动态地在表中添加行。每行是j个单元格。我的$（＆＃34;＃＆＃34; + cellId）.click函数的问题在于，在单击任何单元格时，显示的结果是该行中最后一个单元格的结果。这是因为，作为show函数的参数传递的"list"始终对应于该行的最后一个单元格。

基本上：如果这些是对应于给定行的每个单元格的4个列表：

list [{"host":"example.com","metric":"PENDING_COUNT","value":{"15-10-2014 19:30_0":1},"tags":"","alert":"OKAY"}]
 list [{"host":"example.com","metric":"PENDING_COUNT","value":{"15-10-2014 19:25_0":1},"tags":"","alert":"OKAY"}]
 list [{"host":"example.com","metric":"PENDING_COUNT","value":{"15-10-2014 19:20_0":1},"tags":"","alert":"OKAY"}]
 list [{"host":"example.com","metric":"PENDING_COUNT","value":{"15-10-2014 19:15_0":1},"tags":"","alert":"OKAY"}]

传递给show（）函数的唯一列表[无论点击该行的哪个单元格]都是最后一个列表＆＃39;

即：

list [{"host":"example.com","metric":"PENDING_COUNT","value":{"15-10-2014 19:15_0":1},"tags":"","alert":"OKAY"}]

有人能告诉我如何解决这个问题吗？

提前致谢！

Answer 1

您需要将单击处理程序包装在一个闭包中并传入list。

(function(list){
    $("#"+cellId).click(function(){ console.log(" i clicked on " +this.id);show(list)});
})(list);

这使得本地作用域list阻止所有迭代使用相同的列表。没有闭包，所有点击处理程序都会看到相同的列表，因为它们是从更高的范围中提取它。

如何修复.click功能本质上更具动态性

1 个答案: