JavaScript循环按钮始终采用最后值

Question

i具有从TMDB爬网的函数。我想处理这种回应。例如，我确实搜索电影，并想将结果(标题和海报图像(放入带有按钮的表中。
效果很好。
为此，我有一个循环，可以创建一个带有每个循环条目的表。在1个条目中，我有一个按钮，该按钮应该调用另一个函数，并在特定循环中设置的值(形式的海报路径(。

部分工作...
问题IS：给出的新功能的值始终是最后一个值(最后一个循环的值(。
我不知道如何修复：/

我已经尝试了"立即启动的函数表达式"(在此论坛中找到(，看起来像这样

for (var i = 0; i < 3; i++) {
    (function(index) {
        console.log('iterator: ' + index);
    })(i);
}

---

仍然相同的问题：/


那是我的脚本(在此之前设置了" bbcode"one_answers" imglink"(

if (this.status === 200) {
var jsonResponse = JSON.parse(this.responseText);
totalresults = jsonResponse.total_results;
  if (totalresults === 0){ noresult(); }
  if (totalresults === 1){ oneresult(); }
  else {
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    x.setAttribute("border", "1");
    document.getElementById("log").appendChild(x);

    for (var j = 0; j < totaresults; j++) {
    (function(i) {
    posterpath = jsonResponse.results[i].poster_path;
    newbbcode = bbcode.replace(imglink, "http://image.tmdb.org/t/p/w400"+ posterpath);
    var y = document.createElement("TR");
    y.setAttribute("id", "myTr" + i);
    document.getElementById("myTable").appendChild(y);
    var z = document.createElement("TD");
    var t = document.createTextNode(jsonResponse.results[i].title);
    z.appendChild(t);
    document.getElementById("myTr" + i).appendChild(z);
    var z = document.createElement("TD");
    var t = document.createElement("IMG");
    t.setAttribute("src", "http://image.tmdb.org/t/p/w92"+jsonResponse.results[i].poster_path);
    z.appendChild(t);
    document.getElementById("myTr" + i).appendChild(z);
    var z = document.createElement("TD");
    var t = document.createElement("INPUT");
    t.setAttribute("type","button");
    t.setAttribute("value","pick this");
    t.addEventListener("click", function(){workwithnewbbcode(newbbcode)} );
    z.appendChild(t);
    document.getElementById("myTr" + i).appendChild(z);
        })(j);
      }
     }

也许有人有一个非常简单的(noob友好^^(的想法，可以使用JavaScript做到这一点。
感谢你们！

编辑：
感谢Jaromanda X的解决方案！
而不是

newbbcode = bbcode.replace(imglink, "http://image.tmdb.org/t/p/w400"+ posterpath);

只需添加var

var newbbcode = bbcode.replace(imglink, "http://image.tmdb.org/t/p/w400"+ posterpath);

或

    if (this.status === 200) {
    var jsonResponse = JSON.parse(this.responseText);
    totalresults = jsonResponse.total_results;
    if (totalresults === 0) {
        noresult();
    } else if (totalresults === 1) {
        oneresult();
    } else {
        var table = document.createElement("TABLE");
        table.id = "myTable";
        table.border = "1";
        jsonResponse.results.forEach(function(result) {
            var posterpath = result.poster_path;
            var newbbcode = bbcode.replace(imglink, "http://image.tmdb.org/t/p/w400" + posterpath);
            var tr = document.createElement("TR");
            var td1 = document.createElement("TD");
            td1.appendChild(document.createTextNode(result.title));
            tr.appendChild(td1);
            var td2 = document.createElement("TD");
            var img = document.createElement("IMG");
            img.src = "http://image.tmdb.org/t/p/w92" + posterpath;
            td2.appendChild(img);
            tr.appendChild(td2);
            var td3 = document.createElement("TD");
            var input = document.createElement("INPUT");
            input.type = "button";
            input.value ="pick this";
            input.addEventListener("click", function() {
                workwithnewbbcode(newbbcode);
            });
            td3.appendChild(input);
            tr.appendChild(td3);
            table.appendChild(tr);
        });
        document.getElementById("log").appendChild(table);
    }
}

Answer 1

考虑以下示例：

for (var i=0;i<10;i++){
  setTimeout(function(){
    console.log(i);
  },1000);
}

您将始终在输出中获得10个，因为到调用嵌套功能时，我已经到达了循环的末端的变量。

在您的情况下，您的响应对象到达XHR回调。这与Settimeout具有相同的流程。您可以创建一个功能包装器，以将迭代器变量保留在呼叫堆栈中：

var myfunc=function(x){ //a function that returns a function
  setTimeout(function(){
    console.log(x);
  },1000);
}
for (var i=0;i<10;i++) myfunc(i);