Javascript-Bootstrap-Slider，如何根據滑塊的值更新變量

Question

實施了有效的滑塊后，現在我對如何使用滑塊的位置更新頁面上的其他元素感到困惑。 我認為我需要通過在這些花括號之間添加一些語句來創建事件：

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

    });

我在JSFiddle上做了一些演示： DEMO

我希望滑塊上方的數字隨着滑塊的拖動而改變，並且標題下的句子也隨着滑塊的拖動而變為預定義的句子列表。

在此先感謝，非常感謝我能提供的任何幫助:-)

Answer 1

本質上，您想在slide事件期間進行更改，anon函數是該事件發生的回調。 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]);
        });
    });

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