javascript - 设置多个 slider onchange 函数并更改变量

Question

我有一个带有更改参数的循环，我想在该循环中创建的 slider 的 oninput 函数中使用它，但我无法让它工作。这是我的脚本的简化版本:

for (var con in dict) {
    var div = document.getElementById("content");
    var conDiv = document.createElement("div");
    conDiv.innerHTML = "<b>" + con + ":</b><br>";
    var effectID = dict[con].effect_id;
    for (var param in dict[con].params) {
        var inp,span = document.createElement("span");
        span.innerHTML = " " + param + " ";
        conDiv.appendChild(span);
        inp = document.createElement("input");
        inp.type = "range";
        inp.min = vars[effectID][param].min;
        inp.max = vars[effectID][param].max;
        inp.value = dict[con].params[param];        
        inp.oninput = function(con,param,val) {
            setParam(con,param,val);
              }(con,param,this.value);      
        conDiv.appendChild(inp);
    }
    div.appendChild(conDiv);
}

我的代码有什么问题吗？

编辑:我的目标:我有一组想要更改的音频效果。每个容器(con)通过多个参数控制一个效果节点。所有这些参数都有不同的最小值和最大值以及它们现在的实际值。通过 slider ，我希望能够调用一个更改容器参数的函数。因此，每个 slider 应该控制一个效果参数。

Answer 1

这是因为回调是在循环完成后调用的，所以你的变量已经改变了。

通常的技巧是使用立即调用的函数，其作用域可以存储变量值:

for (var con in dict) {
    (function(con) { // <= creates a scope and a new con variable
        var div = document.getElementById("content");
        var conDiv = document.createElement("div");
        conDiv.innerHTML = "<b>" + con + ":</b><br>";
        var effectID = dict[con].effect_id;
        for (var param in dict[con].params) {
            (function(param){
                var inp,span = document.createElement("span");
                span.innerHTML = " " + param + " ";
                conDiv.appendChild(span);
                inp = document.createElement("input");
                inp.type = "range";
                inp.min = vars[effectID][param].min;
                inp.max = vars[effectID][param].max;
                inp.value = dict[con].params[param];        
                inp.oninput = function() {
                    setParam(con,param,inp.value);
                 };      
                conDiv.appendChild(inp);
            })(param);
        }
        div.appendChild(conDiv);
    })(con);
}