[英]Javascript - Bootstrap-Slider, how to update variables according to the value of the slider
实施了有效的滑块后,现在我对如何使用滑块的位置更新页面上的其他元素感到困惑。 我认为我需要通过在这些花括号之间添加一些语句来创建事件:
.on('slide', function(ev){
});
我在JSFiddle上做了一些演示: DEMO
我希望滑块上方的数字随着滑块的拖动而改变,并且标题下的句子也随着滑块的拖动而变为预定义的句子列表。
在此先感谢,非常感谢我能提供的任何帮助:-)
本质上,您想在slide事件期间进行更改,anon函数是该事件发生的回调。 anon函数的第一个参数是事件,该事件包含所需的幻灯片小部件信息。
var i18n = {
1: "My first position",
2: "My second position",
3: "My third position",
4: "My forth position",
5: "My fifth position",
6: "My sixth position",
7: "My seventh position",
8: "My eight position",
9: "My nineth position",
10: "My tenth position"
};
$(function(){
$('#slider_surface').slider()
.on('slide', function(ev){
console.log(ev);
$('.score_number h3').html(ev.value.toString());
$('.score_text p').html(i18n[ev.value]);
});
});
您也可以像这样创建一个更改事件控制器
$('#slider_surface').slider({
//Your slider configuration here
range: "min",
value: 0,
min: 0,
max: 10,
step: 1,
change: function(event, ui) {
//Code to execute when the slider value changes
console.log(ev);
$('.score_number h3').html(ui.value);
$('.score_text p').html(i18n[ui.value]);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.