0
我有2個獨立的代碼,需要將它們組合在一起工作,一個是3個滑塊,您可以選擇不同的值並根據所選值獲取價格。其他代碼需要將這些值添加到數組中。目前,ram,diskspace和cpu值被硬編碼填充,但我需要它來獲取滑塊的值並使用它。滑塊值被保存到自己的值,但我不知道如何使它們一起工作。這是我目前所面對的購物車,其中值插入到了:jQuery將變量推入數組
$(".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);
}
和滑塊功能:
<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/