0
2つの別々のコードがあり、それらを結合して一緒に作業する必要がある場合は、3つのスライダで異なる値を選択し、選択した値に応じて価格を取得します。他のコードでは、これらの値を配列に追加する必要があります。現時点では、RAM、ディスクスペース、およびCPUの値はハードコードされていますが、スライダの値を取得して使用する必要があります。スライダーの値はそこに保存されていますが、それらを連動させる方法はわかりません。これらの2つのコードがでている場合配列に変数をプッシュするJquery
<div class="wrapper">
<input class="slider" id="ram" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" />
<hr />
<input class="slider" id="diskSpace" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" />
<hr />
<input class="slider" id="cpu" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" />
<hr />
</div>
Prijs:
<div id = "prijs">
</div>
var minSliderValue = $("#ram").data("slider-min");
var maxSliderValue = $("#ram").data("slider-max");
$('#ram').slider({
value : 0,
formatter: function(value) {
return 'RAM: ' + value + 'GB';
}
});
$('#diskSpace').slider({
value : 0,
formatter: function(value) {
return 'Disk Space: ' + value + 'GB';
}
});
$('#cpu').slider({
value : 0,
formatter: function(value) {
return 'CPU : ' + value + ' Cores';
}
});
// If You want to change input text using slider handler
$('.slider').on('slide', function(slider){
var ram = $("#ram").val();
var diskSpace = $("#diskSpace").val();
var cpu = $("#cpu").val();
var totalPrice=(parseFloat(ram)*3.5 + parseFloat(diskSpace)*0.15+ parseFloat(cpu)*6.5).toFixed(2);
$("#prijs").html(totalPrice);
});
http://jsfiddle.net/4c2m3cup/42/