绑定类方法作为回调到jquery滑块UI组件

Binding class methods as callbacks to a jquery slider UI component

本文关键字:jquery 滑块 UI 组件 回调 类方法 绑定      更新时间:2023-09-26

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

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

然后我有下面的代码,使用这些控件定义来构建slider组件。

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

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