Question

这就是我实际拥有的：http://jsfiddle.net/downloadtaky/P7jYU/ 我想要实现的是，每次用户移动滑块时，他都不会看到价格变化，也会看到描述变化。

像：

if 20 == basic service (lorem ipsum.....)

if 40 == medium service (lorem ipsum.....)

if 60 == top service (lorem ipsum.....)

If 80 == I can give you also my mum!

有没有人可以帮我理解如何做到这一点？类似于：https://interserver.net/vps/

谢谢你！

Answer 1

我不确定你在哪里坚持这个。你已经有了一个幻灯片事件的处理程序，你需要做的就是添加一些代码来编写或修改描述文本。

$( "#slider-result" ).html( ui.value ).append(ui.value < 50? "- Bad":"- Good");

Answer 2

使用滑块更改事件的回调函数来更新感兴趣的div，如下所示：

$( "#slider" ).slider({
    change: function(event, ui) { 
        if($("#slider").slider("value") === "20"){
            $("#description").html("Basic Service")
        }
        ...
    }
});

doco在这里http://jqueryui.com/demos/slider/

Answer 3

您可以将slide功能更改为：

slide: function( event, ui ) {
                var text = ""
                if ((ui.value <= 80) && (ui.value > 60))
                    text = "text1";
                else if ((ui.value <= 60) && (ui.value > 40))
                    text = "text2";
                //GO ON this way
                $( "#slider-result" ).html( ui.value + "<div>"+text+"<div>" );

            },

你可以在这里找到http://jsfiddle.net/V7LLy/

如何使用jQuery UI Slider添加值？

3 个答案: