Javascript 将类方法绑定为jquery slider UI组件的回调

参考下面的代码，我有一个类方法，它返回指定滑块控件行为的对象列表，还有一个对象方法，当调整滑块以调整适当的值时，它应该用作回调。是一个对象，用于指定以下控件的绑定和参数：预增益、失真和后增益

DistortionPedal.prototype.getControlBindings = function(){
    return new Array({
            name: "Pre Gain",
            min: 0,
            max: 1,
            defaultValue: 0.2,
            inc: 0.05,
            setMethod: this.setPreGain.bind(this)
        }, {
            name: "Distortion",
            min: 0,
            max: 1,
            defaultValue: 0.95,
            inc: 0.05,
            setMethod: this.changeDistortion.bind(this)
        }, {
            name: "Post Gain",
            min: 0,
            max: 1,
            defaultValue: 0.5,
            inc: 0.05,
            setMethod: this.setPostGain.bind(this)
        }
    );
};

然后，我有以下代码使用这些控件定义来构建滑块组件

//var pedal instantiated earlier as a DistortionPedal object
var pedalControls = pedal.getControlBindings()
for(var x = 0; x < pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    var control = pedalControls[x];

     $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
     $("#" + controlId).slider({
        range: "min",
        min: control.min,
        max: control.max,
        step: control.inc,
        value: control.defaultValue,
        slide: function( event, ui ) {
            control.setMethod(ui.value); //this is where things get strange
        }
    });
}

//前面实例化为扭曲踏板对象的变量踏板
var pedalControls=踏板.getControlBindings（）
对于（变量x=0；x

如您所见，它创建滑块并设置各种参数。问题在于，所有滑块最终都会调用setPostGain作为回调函数，即使只有一个控件（列表中的最后一个）具有该回调方法。知道发生了什么事吗

更新 根据提供的答案，更新代码为：

for(var x = 0; x < pedalControls.length; x++){
    var controlId = "control_" + id + "_" + x;
    (function(control){
         $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
         $("#" + controlId).slider({
            range: "min",
            min: control.min,
            max: control.max,
            step: control.inc,
            value: control.defaultValue,
            slide: function( event, ui ) {
                control.setMethod(ui.value);
            }
        });
    })(pedalControls[x]);
}

for（变量x=0；x

您的

控件

变量不在闭包中，因此调用幻灯片时，幻灯片回调将获取上次存储在

控件

变量中的任何值。请尝试以下方法：

$(pedal.getControlBindings()).each(function(index) {
    var controlId = "control_" + id + "_" + index;
    var control = this;

    $("#" + id ).append(control.name + "<div id = '" + controlId + "'></div>");
    $("#" + controlId).slider({
        range: "min",
        min: control.min,
        max: control.max,
        step: control.inc,
        value: control.defaultValue,
        slide: function( event, ui ) {
            control.setMethod(ui.value); //this is where things get strange
        }
    });
});

$（踏板.getControlBindings（））。每个（函数（索引）{
var controlId=“控制”+id+“+index；
var控制=此；
$（“#”+id）.append（control.name+）；
$（“#”+controlId）.滑块({
射程：“分钟”，
min:control.min，
max:control.max，
步骤：control.inc，
值：control.defaultValue，
幻灯片：功能（事件、用户界面）{
control.setMethod（ui.value）；//这就是事情变得奇怪的地方
}
});
});

啊，是的，结束了。我仍然习惯于javascript的作用域。我做的和你推荐的有点不同（见更新），但效果相同。谢谢