Question

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

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

如您所见，它会创建滑块并设置各种参数。问题是所有滑块最终都会调用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]);
}

Answer 1

您的control变量不在闭包内，因此当调用幻灯片时，幻灯片回调将获得上次存储在control变量中的任何值。试试这个：

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

将类方法绑定为jquery滑块UI组件的回调

1 个答案: