jQuery步驟滑塊輸出多個變量（價格）

我有一個滑塊，需要移動通過一組點相互等距離，而顯示完全任意定價。jQuery步驟滑塊輸出多個變量（價格）

例如，我有4個服務器配置需要將每月費率移動到50,100,201和403美元。 Rackspace和亞馬遜的價格也需要更新，以顯示完全不同的數字...... Rackspace的86,245,648和864以及43,86,172和345美元。這意味着當服務器顯示50美元時，Rackspace將顯示86美元，亞馬遜將顯示86美元。這可能是jQuery 101之類的東西。大聲笑

開箱，滑塊只給我座標的值。

我的jQuery知識有點差，而我可以閱讀正在發生的事情，而且我知道我想要它做什麼，我無法弄清楚如何將其轉化爲書面形式。

$(function() { 
$("#slider").slider({ 
    value: 0, 
    min: 50, 
    max: 498, 
    stepValues: [50, 114, 178, 243, 306, 370, 434, 498], 
    slide: function(event, ui) { 

     var stepValues = $(this).slider("option", "stepValues"), 

      distance = [], 
      minDistance = $(this).slider("option", "max"), 
      minI; 

      $.each(stepValues, function(i, val) { 
       distance[i] = Math.abs(ui.value - val); 
        if (distance[i] < minDistance) { 
         minDistance = distance[i]; 
         minI = i; 
        } 
      }); 

      if (minDistance) { 
       $(this).slider("value", stepValues[ minI ]); 
       return false; 
      } 

     $("#amount").val("$" + ui.value); 
    } 
}); 
$("#amount").val("$" + $("#slider").slider("value")); 

});

下面是步驟滑塊對我的項目一個半半工作版本：http://robsdesign.com/nebo/internap/cloud.html

感謝您的任何幫助。

來源

2013-04-03 Rob

還有一些javascript丟失。正如你所看到的，只要你將鼠標懸停在滑塊上，就會添加一個ui-hover類，當你點擊它時，你會得到一個ui-active類。這可能會觸發或觸發更新滑塊位置的事件。你可以做2件事。監聽此事件並更新值，或將代碼放在更新滑塊的相同代碼中。

你需要這條線爲每月估計費用：

$("#amount").val(*here); // place *here the value you want to update

，你需要ID添加到包含其他兩個價值的HTML：

<span class="cost">$263/Month</span>

和

<span class="cost">$238/Month</span>

類似於：

<span class="cost" id="rack">$263/Month</span>

和

<span class="cost" id="amazon">$238/Month</span>

，然後用這些線更新它們的值。

$("#rack").val(*here); // place *here the value you want to update

和

$("#amazon").val(*here); // place *here the value you want to update

的值上，您將立足您的更新將是「左」的風格，你的滑塊，當你改變它的位置有：

例如，第一個位置，你有0％

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>

併爲下一個位置你得到這個值：

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 14.285714285714285%;"></a>

來源

2013-04-03 18:30:15 RobertoNovelo

jQuery步驟滑塊輸出多個變量（價格）

回答

相關問題