javascript - 如何在 JavaScript 中按下数组中的按钮来相应地更改内容？

Question

我在 js 中有一个包含多个可点击项目的数组。当我单击其中任何一个时，我想更改其他div的内容以显示相应的名称和描述。我现在使用这样的东西:

window.addEventListener("load",function(){

    var displayName = document.getElementById("display-title");
    var displayDesc = document.getElementById("display-desc");

    var projectNames = ["Name1", "Name2"];
    var projectDescs = ["Example project 1", "Example project 2"];

    var projectButtons = [document.getElementById("project-One"), document.getElementById("project-Two")];

    for(var i = 0; i < projectButtons.length; i++){

        projectButtons[i].addEventListener("click", function(){

            displayName.innerHTML = projectNames[i];
            displayDesc.innerHTML = projectDescs[i];

        });

    }

});

但是，当我单击任何按钮时，我总是会显示第二个名称和描述。我该如何将其更改为选定的按钮？最后一件事，我改变的不仅仅是名称和描述，而且我将在数组中添加更多按钮，因此为每个按钮创建不同的功能并不是真正的选择，而且我仅限于使用Javascript，因此 JQuery 或 PHP 不是一个选择。我可能错过了一些明显的东西，但我不知道是什么......

<小时/>

编辑:

以下内容似乎有效，这就是已经回答的内容，尽管我不确定我是否正确实现了它:

for(var i = 0; i < projectButtons.length; i++) {
        (function(i) {
            setTimeout(function() {
                projectButtons[i].addEventListener("click", function(){
                    displayName.innerHTML = projectNames[i];
                    displayDesc.innerHTML = projectDescs[i];
                });
            });
        })(i);
    }

Answer 1

这是循环中臭名昭著的闭包变量

http://www.teknically-speaking.com/2013/01/closures-in-loops-javascript-gotchas.html