在按钮单击时将值从输入添加到数组

Question

我有3个bootstrap滑块，基本上是输入字段。这些滑块的值显示在输入框中，在其下方显示价格值。我需要做的是只要点击一个按钮就将这4个值保存到数组中。我设法用硬编码的值来做这个，没有像这样的按钮：

<li> <a class = "add-to-cart" href = "#" data-name = "Windows" data-price = "99.95" data-ram ="1" data-diskSpace="30" data-cpu="3">

<script>
$(".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"));
    var ram = Number($(this).attr("data-ram"));
    var diskSpace =Number($(this).attr("data-diskSpace"));
    var cpu = Number($(this).attr("data-cpu"));
    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);

}
</script>

这是我输入框中值的代码：

      <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 />
  <input type="text" class="form-control" id="inputValue" value="0" />


  </div>
  Prijs:
<div id = "prijs">
</div>

<script>
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
$('#ram, #diskSpace, #cpu').on('slide', function(slider){
 var ram = parseFloat($('#ram').val());
 var diskSpace = parseFloat($('#diskSpace').val());
 var cpu = parseFloat($('#cpu').val());
    $("#inputValue").val("RAM="+ ram + "GB, Disk=" +diskSpace + "GB, Core="+cpu);
    var totalPrice=(parseFloat(ram)*3.5 + parseFloat(diskSpace)*0.15+ parseFloat(cpu)*6.5).toFixed(2);
  $("#prijs").html(totalPrice);

});
</script>

为滑块功能工作jsfiddle：http://jsfiddle.net/umxhhqy4/8/