时间戳

首页 > 解决方案 > 动态生成的按钮将 onclick 事件中的变量值传递给更深的嵌套函数

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

问题描述

我正在为基于浏览器的游戏创建保存对话框，但遇到了一些问题。我已经保存并列出了保存，但我在加载、覆盖和删除时遇到了问题。我已经动态创建了保存条目，以及用于操作每个保存的按钮。单击任何按钮将打开一个确认对话框，单击“是”将执行实际操作。我的问题在于让每个操作在相关保存上实际运行。到目前为止，我的代码如下所示：

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 个函数知道要对哪个保存进行操作。我认为闭包是一路获取价值的方法，但老实说，我不太确定如何以一种可行的方式实现它。我主要在 vanilla js 中寻找解决方案，但如果做不到这一点，则欢迎使用另一种解决问题的方法。

标签： javascript

解决方案

伙计，原来我是如此接近。我做了两个小改动：

我在for循环构造函数中 var改为：let

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

而我改为saveNum接受a自身的价值：

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

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

推荐阅读