Question

我有一个更改参数的循环，我想在我在该循环中创建的滑块的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）通过多个参数控制效果节点。所有这些参数都具有不同的最小值和最大值以及它们现在具有的实际值。通过滑块，我希望能够调用一个更改容器参数的函数。因此，每个滑块应控制一个效果参数。

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);
}

使用更改变量在change函数上设置多个滑块

1 个答案: