jquery兩個滑塊不同的價格

Question

我現在用以下方式stuk：

我有兩個滑塊：一個與數量，其他與contractperiod。 如果數量增加，每件價格下降。 如果合同期限上漲，每件的價格將下降更多。

我現在是這樣的：http://jsfiddle.net/vBVkL/16/ 不知何故，我不能改變每批使用批次時的價格。

qty = ui.value; //-> this works 

    qty = batches[ui.value - 1]; //-> this doesn't work 

有人可以幫我解決這個問題嗎？ 謝謝！

Answer 1

變化的滑塊處理程序以下行：

$("input").val(prices[contract][qty - 1]); 

到

$("input").val(prices[contract][ui.value - 1]); 

原始代碼使用變量qty這是一個字符串。當您嘗試從中扣除1時，將導致「Not a Number」不能用於索引batches陣列。

還有你prices陣列的一個問題。它們只包含三個值，但你的滑塊可以選擇第四，你需要添加一個值到這些陣列的末尾：

var prices = { 
    'none': [10, 9, 8, ?], 
    '12 months': [9, 8, 7, ?], 
    '24 months': [8, 7, 6, ?], 
    '36 months': [7, 6, 5, ?], 
}; 

Updated fiddle

我不知道究竟是爲什麼滑塊做頁面首次加載時不能正確動畫。

編輯：

滑塊是行不通的頁面加載時的原因是因爲用於初始化的變量值：

var contract = 'Geen' 

當滑塊移動代碼$("input").val(prices[contract][qty - 1]);嘗試在contracts數組中查找值Geen並失敗，因此該函數因錯誤而結束，並且jQueryUI從未完成更新滑塊的工作。直到你移動第二個滑塊，變量才能正確設置。

設置的contract初始值設定爲「無」表示的代碼將正確執行和滑塊將動畫。

也有位置更改合同期限滑塊設定價格時忽視了量滑塊的值的錯誤。行：

$("input").val(prices[contract][ui.value - 1]); 

在 「slider2」 事件處理

應改爲：

$("input").val(prices[contract][$("#slider1").slider("value") - 1]); 

看一看the updated fiddle在這一切現在的作品。