2016-11-27 8 views
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/

答えて

0

$(".add-to-cart").click(function(event){ 
    event.preventDefault(); // prevents the links from doing their default behaviour 
    var name = $(this).attr("data-name"); 
    var price = Number($(this).attr("data-price")); //so this needs to be the totalPrice from the sliders fiddle 
    var ram = Number($(this).attr("data-ram"));// this needs to be the ram from the sliders fiddle 
    var diskSpace =Number($(this).attr("data-diskSpace"));// this needs to be the diskSpace from the sliders fiddle 
    var cpu = Number($(this).attr("data-cpu"));// this needs to be the cpu from the sliders fiddle 
    addItemToCart(name,price,1,ram,diskSpace,cpu); 
    displayCart(); 
}); 



var cart = []; 
var Item = function (name,price,quantity,ram,diskSpace,cpu){ 
    this.name = name; 
    this.price = price; 
    this.quantity = quantity; 
    this.ram = ram; 
    this.diskSpace = diskSpace; 
    this.cpu = cpu; 
}; 

//addItemToCart(name,price,quantity) 

function addItemToCart(name,price,quantity,ram,diskSpace,cpu){ 
for (var i in cart){ 
    if(cart[i].name === name){ 
     cart[i].quantity +=quantity; 
     saveCart(); 
     return; 
    } 

} 
    var item = new Item(name,price,quantity,ram,diskSpace,cpu); 
    cart.push(item); 

} 

とスライダー機能:これは私が値がに挿入されますショッピングカートのため、現時点では持っているものです同じファイルを使って簡単に値を取得できます:

$("#ram").val(); 
$("#cpu").val(); 

上記のコードeはhtmlが含まれているのと同じページに含まれていますが、私が言及したコードも同様に機能します。

関連する問題