0

这是 JSFiddle 链接：( http://jsfiddle.net/jforman07/qaU7K/222/ )。

问题：滑块不移动

这是JavaScript：

$(document).ready(function () {
 $("#slider").slider({
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {

         $("input.sliderValue[data-index=0]").val("$" + ui.values[0] + "k");

        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
        };
        setTimeout(delay, 0);
     }
 });


});

如果我改变

value: 50,

到

values: [50],

然后滑块工作，但随后滑块上的绿色阴影消失 - 如在这个 JSFiddle 中看到的 - http://jsfiddle.net/jforman07/qaU7K/223/

4

2 回答 2

2

只需将代码中的一行更改如下

从

       $("input.sliderValue[data-index=0]").val("$" + ui.values[0] + "k");

到

       $("input.sliderValue[data-index=0]").val("$" + ui.value + "k");

更新小提琴

于 2013-07-06T07:37:17.843 回答
1

这似乎有效：

$(document).ready(function () {
$("#slider").slider(options = {
    range: "min",
    value: 50,
    min: 1,
    max: 100,

    slide: function (event, ui) {


        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');

            $("#slideText").html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
             $(".sliderValue").val("$" + ui.value + "k");
        };

        setTimeout(delay, 0);


    },
    create : function (event, ui){
     $(".sliderValue").val("$" + options.value+ "k");

    }
});


});

A：使用创建选项作为滑块完成时的回调函数。UI 是空的，所以我们必须命名我们的选项，正如您在 params 中看到的那样，(options = {...})这将允许我们通过调用 B 来获取预设值options.value ：您应该在延迟函数中更新滑块标签。

于 2013-07-06T07:23:54.870 回答