Здравствуйте. Уже обращался на форум, но теперь мне нужно немного переделать старый скрипт. Кратко о том что нужно:
Есть у меня список ингредиентов - "ing_list"
Есть две кнопки "ing_add", различаю их по атрибуту data('opetarion') есть МИНУС и ПЛЮС;
Есть счетчик ингредиентов count_ing и массив ингредиентов ingredients и цена каждого из ингредиентов ing_price.
Вот сам код:
<!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(){
var ing_list = $('.add_ing_list li'),
ing_add=ing_list.find('span.add_new_ing'),
count_ing = 0,//счетчик ингредиентов
ingredients='',//массив ингредиентов
ing_price = 0;//общая цена ингредиентов
//нужно сделать еще счетчик цены ing_price чтобы он добавлялся или отнимался в зависимости от выполняемого действия
ing_add.click(function () {
var ing_price = $(this).data('ord');//цена ингредиента
var operation = $(this).data('operation');//операция плюс или минус
if(operation=='plus'){
if($(this).parent('li').hasClass('added_to_list')){
count_ing++;
$(this).parent('li').find('span.count_ing').text('+'+count_ing+' ');
ingredients = $.map($($(this).parent('li.added_to_list')),function(el) {
return $(el).text()
});
}else{
count_ing=$(this).parent('li').find('span.count_ing').text();
count_ing++;
$(this).parent('li').addClass('added_to_list');
$(this).parent('li').find('span.count_ing').text('+'+count_ing+' ');
ingredients = $.map($($(this).parent('li.added_to_list')),function(el) {
return $(el).text()
});
}
} else if(operation=='minus'){
count_ing--;
if($(this).parent('li').hasClass('added_to_list')){
if(count_ing<=0){
$(this).parent('li').removeClass('added_to_list');
$(this).parent('li').find('span.count_ing').text('');
count_ing=0;
ingredients = $.map($($(this).parent('li.added_to_list')),function(el) {
return $(el).text('')
});
}else{
$(this).parent('li').find('span.count_ing').text('+'+count_ing+' ');
ingredients = $.map($($(this).parent('li.added_to_list')),function(el) {
return $(el).text()
});
}
}else{
return false;
}
} else {
return false;
}
alert(ingredients)
});
});
</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 -->
</body>
</html>
Что мне нужно и что у меня получается:
Когда я нажимаю на ПЛЮС возле названия ингредиента появляется количество, и добавляется класс "added_to_list",
в массив ингредиентов должно заноситься значение, то есть весь текст родительского элемента <li>
когда нажимаю на МИНУС, количество уменьшается и из массива должно удалиться то количество которое удалили или вообще удалить из массива данный ингредиент, если количество равно = 0.
Сейчас у меня следующие проблемы:
1) когда я добавляю несколько разных ингредиентов, у меня счетчик сбивается. То есть, допустим я добавил +3 сыр, +3 томаты, +7 курицы, и когда я нажму на кнопку ПЛЮС чтобы добавить сыр, счетчик посчитает уже +8 сыр. то есть возьмет последнее значение которое я добавил и добавит +1, то есть последнее было +7 курицы, сыр станет +8.
2)Когда я добавляю элементы в массив, они просто перезаписываются в место уже имеющихся
3)Когда я отминусую все элементы - текст <li> вообще пропадает.
Надеюсь поймете
) Спасибо