如何使用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滑塊添加值？

回答

相關問題