javascript - 动态生成的按钮将 onclick 事件中的变量值传递给更深层次的嵌套函数

Question

我正在为基于浏览器的游戏创建保存对话框，但遇到了一些问题。我已经保存并列出了保存的内容，但在加载、覆盖和删除方面遇到了问题。我已经动态创建了保存条目，以及用于操作每个保存的按钮。单击任何按钮将打开一个确认对话框，单击"is"将执行实际操作。我的问题在于让每个操作在相关保存上实际运行。到目前为止我的代码看起来像这样:

var saveNum, buttonType;
function loadSaveList(){
    saves = JSON.parse(localStorage.getItem("game_saves"));
    for(var a=0; a < saves.length; a++){
        var entry = document.createElement("div");
        var buttons = document.createElement("div");
        var overwriteB = document.createElement("input");
        var deleteB = document.createElement("input");
        var loadB = document.createElement("input");
        overwriteB.type = "button";
        deleteB.type = "button";
        loadB.type = "button";
        overwriteB.onclick = function(){buttonType = 0; saveNum = function(){return a;}; saveAlert();};
        deleteB.onclick = function(){buttonType = 1; saveNum = function(){return a;}; saveAlert();};
        loadB.onclick = function(){buttonType = 2; saveNum = function(){return a;}; saveAlert();};
        buttons.appendChild(overwriteB);
        buttons.appendChild(deleteB);
        buttons.appendChild(loadB);
        entry.appendChild(buttons);
        document.getElementById("saveEntries").appendChild(entry);}}
function saveAlert(){
    switch(buttonType){
        case 0:
            document.getElementById("alertYes").onclick = overwriteButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;
        case 1:
            document.getElementById("alertYes").onclick = deleteButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;
        case 2:
            document.getElementById("alertYes").onclick = loadButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;}}
function overwriteButton(){
    unloadSaveList();
    saves.splice(saveNum, 1, currentSave);
    localStorage.setItem("game_saves", JSON.stringify(saves));
    loadSaveList();}
function deleteButton(){
    unloadSaveList();
    saves.splice(saveNum, 1);
    localStorage.setItem("game_saves", JSON.stringify(saves));
    loadSaveList();}
function loadButton(){
    var tempSave = saves.slice(saveNum, saveNum+1);
    currentSaveLoad(tempSave);
    unloadSaveList();
    saves = [];}

我的目的是使用 saveNum 来存储 a 的值，以便底部 3 个函数知道要操作哪个保存。我认为闭包是从头到尾获得值(value)的方法，但老实说，我不太确定如何以可行的方式实现它。我主要是在 vanilla js 中寻找解决方案，但如果做不到这一点，那么解决问题的替代方法将受到欢迎。

Answer 1

伙计，事实证明我是如此接近。我做了 2 个小改动:

我在 for 循环构造函数中将 var 更改为 let:

for(let a=0; a < saves.length; a++){  

我更改了 saveNum 以接受 a 本身的值:

loadB.onclick = function(){buttonType = 2; saveNum = a; saveAlert();};

感谢 Hunter Frazier 为我指明了正确的方向。