绑定类方法作为回调到jquery滑块UI组件
Binding class methods as callbacks to a jquery slider UI component
参考下面的代码,我有一个类方法,它返回一个指定滑块控件行为的对象列表,还有一个对象方法,当调整滑块以调整适当的值时,它应该被用作回调。是一个对象,用于指定以下控件的绑定和参数:预增益、失真和后增益。
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
}
});
});
相关文章:
- jquery滑块在css弹出菜单中工作
- Jquery滑块与Slick滑块
- jQuery滑块淡入淡出
- 根据窗口宽度动态更改jQuery滑块选项
- Jquery滑块在事件更改时更新值
- 如何将jquery滑块设置为自动,而不是点击或悬停在拇指上
- 处理多个jquery滑块
- 如何使用jquery滑块增加日期
- 如何为显示jquery滑块值的文本框设置默认值
- 为简单的jQuery滑块添加自动播放功能
- 如何在jquery ajax响应后设置jquery滑块的起始值
- 带角js的Jquery滑块无法正常工作
- 我将如何使这个小的jQuery滑块向右滑动
- 创建具有点击幻灯片功能的 jQuery 滑块
- jQuery - 滑块不起作用
- iPad中的Jquery滑块问题,在台式机和笔记本电脑中工作正常
- Jquery滑块,如果显示父项,则幻灯片不会全宽:无
- jQuery滑块在第4次单击时重定向
- 根据距离显示/隐藏标记(使用JQuery滑块)
- 使jQuery滑块导航只影响最近的类