Все данные сохраняются в ing.ingridients т.е. твой массив.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
setObj = Object.defineProperty;
ing = {
ingridients: {},
action: {},
run: function() {
this.clickWacher();
},
clickWacher: function() {
var _this = this;
$(".ing_change").click(function() {
_this.collectData(this);
_this.calculate();
_this.populateData();
_this.changeCounter(this);
});
},
collectData: function(elem) {
this.action = {
ingridient: $(elem).parent().data('ing'),
price: $(elem).parent().data('price'),
change: $(elem).text(),
label: $(elem).parent().find('.ing_label').text()
}
},
calculate: function() {
if (!this.ingridients[this.action.ingridient]) {
var i = this.action.change == "+" ? 1 : 0 ;
setObj(this.ingridients, this.action.ingridient, {
value: {
price: this.action.price,
num: i,
label: this.action.label
}
});
}
else if (this.ingridients[this.action.ingridient].num > 0 || this.action.change == "+") {
this.ingridients[this.action.ingridient].num += this.action.change == "+" ? 1 : -1 ;
this.ingridients[this.action.ingridient].price = this.action.price * this.ingridients[this.action.ingridient].num ;
}
},
populateData: function() {
if (this.ingridients[this.action.ingridient].num > 0) {
if ($('#' + this.action.ingridient).length == 0) $('.stat').append('<p id="' + this.action.ingridient + '"></p>');
$('#' + this.action.ingridient).text("Ингридиент: "+ this.action.label + " " + this.ingridients[this.action.ingridient].num
+ "шт. " + this.action.price + "$. Сумма: " + this.ingridients[this.action.ingridient].price + "$");
}
else $("#" + this.action.ingridient).remove();
},
changeCounter: function(elem) {
var counter = $(elem).parent().find('.ing_num').text(": " + this.ingridients[this.action.ingridient].num);
}
}
ing.run();
});
</script>
</head>
<body>
<div class="pizza_add_ing">
<ul class="add_ing_list">
<li data-ing="cheese" data-price="10">
<span class="ing_change">-</span>
<span class="ing_label">Сыр</span><span class="ing_num">: 0</span>
<span class="ing_change">+</span>
</li>
<li data-ing="tomato" data-price="15">
<span class="ing_change">-</span>
<span class="ing_label">Томаты</span><span class="ing_num">: 0</span>
<span class="ing_change">+</span>
</li>
<li data-ing="chicken" data-price="20">
<span class="ing_change">-</span>
<span class="ing_label">Курица</span><span class="ing_num">: 0</span>
<span class="ing_change">+</span>
</li>
</ul>
<div class="stat"></div>
</div>
<style>
.ing_change {
background: #558b2f;
color: #ffffff;
font-weight: bold;
cursor: pointer;
width: 25px;
display: inline-block;
text-align: center;
line-height: 25px;
}
li {
margin-bottom: 15px;
list-style: none;
}
.ing_label {
width: 55px;
display: inline-block;
}
.ing_num {
width: 25px;
display: inline-block;
}
</style>
</body>
</html>