如何使用jQuery UI滑块添加值？

这就是我实际得到的结果：http://jsfiddle.net/downloadtaky/P7jYU/ 我想实现的是每次用户移动滑块时，他都看不到只有价格变化，而且描述也在变化。如何使用jQuery UI滑块添加值？

像：

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/

感谢yoU！

来源

2012-02-06 maisdesign

您可以将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/

来源

2012-02-06 00:37:07 zambotn

作为一般规则，尽量不要只发布一个链接到JsFiddle - 你还应该包括你的答案的核心部分也在StackOverflow中。但是你的代码似乎工作。 – GregL 2012-02-06 00:42:39

还有一个问题，如果我添加图像而不是文本： 'if（（ui.value <= 80）&&（ui.value> 60）） text =“

“;' 中，示出即使我移动从60至70，更 – maisdesign 2012-02-06 09:38:07

肯定的，是正确的。如你所写的那样，它显示在区间（60,80）中。如果你只想在60你可以改变_if statment_到'ui.value == 60' – zambotn 2012-02-06 11:10:23

我不确定你在哪里被卡住了。您已经获得了幻灯片事件的处理程序，您只需添加一些编写或修改描述文本的代码即可。

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

来源

2012-02-06 00:29:22 SynXsiS

我怀疑他们的代码是复制粘贴的，他们不完全理解如何修改它。并不是说这有什么问题，我们都是从这样的jQuery开始的，但这也许可以解释OP为什么要问这个问题。 – GregL 2012-02-06 00:45:13

你几乎是对的，我几乎是一个jQuery的新手，我并没有完全理解这个函数是如何工作的:-P – maisdesign 2012-02-06 09:21:23

使用回调函数上滑块的变化事件来更新感兴趣的DIV，像这样：

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

DOCO是在这里http://jqueryui.com/demos/slider/

来源

2012-02-06 00:30:53 jhsowter

如何使用jQuery UI滑块添加值？

回答

相关问题