Javascript - Bootstrap-Slider，如何根据滑块的值更新变量答案

【问题标题】：Javascript - Bootstrap-Slider, how to update variables according to the value of the sliderJavascript - Bootstrap-Slider，如何根据滑块的值更新变量
【发布时间】：2013-11-03 19:23:35
【问题描述】：

实现了工作滑块后，我现在对如何使用滑块的位置来更新页面上的其他元素感到困惑。我认为我需要通过在这些大括号之间添加一些语句来创建一个事件：

.on('slide', function(ev){

    });

我在 JSFiddle 上放了一个小演示：DEMO

我希望滑块上方的数字随着滑块的拖动而改变，并且标题下的句子也随着滑块的拖动而更改为预定义句子的列表。

在此先感谢，非常感谢我能得到的任何帮助:-)

【问题讨论】：

标签： javascript twitter-bootstrap slider

【解决方案1】：

本质上，您想在幻灯片事件期间进行更改，匿名函数是在该事件上发生的回调。 anon 函数的第一个参数是包含您想要从幻灯片小部件中获得的信息的事件。

http://jsfiddle.net/8E9M8/

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

【讨论】：

完美！感谢您的帮助

【解决方案2】：

您也可以像这样创建更改事件控制器

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

【讨论】：