rostik1991,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.add_new_ing {
cursor: pointer;
margin: 0 4px;
}
li .add_ing_minus {
visibility: hidden;
}
li.added_to_list .add_ing_minus {
visibility: visible;
}
li{
list-style-type: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var ing_list = $(".add_ing_list li"),
ing_add = ing_list.find("span.add_new_ing"),
count_ing = {},
ingredients = [],
ing_price = 0,
ing_text = {1 : 'Сыр',2 : 'Томаты', 3 : 'Курица'};
ing_list.each(function(indx, li) {
li = $(li);
li.on("click", "span.add_new_ing", function(event) {
event.preventDefault();
var add = $(this).data("operation") == "plus" ? 1 : -1;
var id = li.data("id");
var count = (count_ing[id] || 0) + add;
count < 0 && (count = 0);
count_ing[id] = count;
$("span.count_ing",
li).text(count ? count + " " : "");
li.toggleClass("added_to_list", !!count);
ingredients = [];
ing_price = 0;
$.each(ing_list, function(i, li) {
li = $(li);
var id = li.data("id");
var count = count_ing[id] || 0;
var price = li.data("ord");
if (count) {
ingredients.push(count + " " + ing_text[id]);
ing_price += price * count
}
});
$("p").html(ingredients + '<br>Итого: ' + ing_price)
})
})
});
</script>
</head>
<body>
<div class="pizza_add_ing">
<ul class="add_ing_list">
<li data-ord="10" data-id="1">
<span class="add_new_ing add_ing_minus" data-operation="minus">-</span>
<span class="count_ing"></span>Сыр
<span class="add_new_ing add_ing_plus"data-operation="plus">+</span>
</li>
<li data-ord="15" data-id="2">
<span class="add_new_ing add_ing_minus" data-operation="minus">-</span>
<span class="count_ing"></span>Томаты
<span class="add_new_ing add_ing_plus"data-operation="plus">+</span>
</li>
<li data-ord="20" data-id="3">
<span class="add_new_ing add_ing_minus" data-operation="minus">-</span>
<span class="count_ing"></span>Курица
<span class="add_new_ing add_ing_plus"data-operation="plus">+</span>
</li>
</ul>
</div><!-- .pizza_add_ing -->
<p></p>
</body>
</html>