Форум

rostik1991 · #1 (**permalink**) 03.11.2015, 14:03

Здравствуйте, не могу разобраться с одной проблемой.

Внутри HTML :

<ul class="add_ing_list">
    <li data-ord="25" data-id="1"><span class="count_ing"></span>Сыр (25 ₴)</li>
    <li data-ord="30" data-id="2"><span class="count_ing"></span>Курица(30 ₴)</li>
    <li data-ord="35" data-id="3"><span class="count_ing"></span>Соус(35 ₴)</li>
</ul>

Код JS:

var ingredients='', //пустая строка
     ing_price = 0; //сумма ингредиентов (цена)

var ing_list = $('.add_ing_list li'); // отдельный ингредиент
var count_ing = 0; // количество добавленных ингредиентов которое отображаться рядом с названием ингредиента

    ing_list.click(function(){
        if($(this).hasClass('checked')){
            count_ing ++;
            $(this).find('span').text('+'+count_ing+' ');
            ingredients += $(this).text()+', ';
            ing_price += $(this).data('ord');

        }else{
            $(this).addClass('checked');
            count_ing=0;
            count_ing ++;
            $(this).find('span').text('+'+count_ing+' ');
            ingredients += $(this).text()+', ';
            ing_price += $(this).data('ord');
        }
    });

Объясню еще раз проблему.

Есть у меня ингредиенты в списке ul.add_ing_list. По нажатию на <li> в строку ingredients записывается текст нажатого элемента. Допустим я нажимаю на "Сыр", в строку ingredients записывается "+1 Сыр", то есть строка уже не пустая, ingredients = "+1 Сыр (25 ₴)"; Когда я нажму еще раз на "Сыр", в строку запишется еще один "Сыр", но уже "+2 Сыр", ибо count_ing уже будет +2, то есть строка ingredients = "+1 Сыр (25 ₴), +2 Сыр (25 ₴)". Мне необходимо сделать так, что, если я нажимаю на тот элемент, который уже есть в строке, заменялось новым, то есть, если я нажму 10 раз на "Сыр", в строке должно появится ingredients = "+10 Сыр (25 ₴)"; Сейчас же если я 10 раз нажму "Сыр", строка ingredients будет равняться = "+1 Сыр (25 ₴), +2 Сыр (25 ₴), ..., +10 Сыр (25 ₴)";

рони · #2 (**permalink**) 03.11.2015, 14:24

rostik1991,
попробуйте сделать рабочий макет, хотя бы на сыр и картошку без php и попробуйте ещё раз обьяснить про 1 и 2

rostik1991 · #3 (**permalink**) 03.11.2015, 15:13

Описал проблемку подробнее, спасибо

рони · #4 (**permalink**) 03.11.2015, 15:32

rostik1991,
так?

<!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>
     $(function(){
var ingredients='', //пустая строка
     ing_price = 0; //сумма ингредиентов (цена)

var ing_list = $('.add_ing_list li'); // отдельный ингредиент
var count_ing = 0; // количество добавленных ингредиентов которое отображаться рядом с названием ингредиента

    ing_list.click(function(){
        if($(this).hasClass('checked')){
            count_ing ++;
            $(this).find('span').text('+'+count_ing+' ');
              ingredients = $.map($('.add_ing_list li.checked'),function(el) {
    return $(el).text()
});
            ing_price += $(this).data('ord');

        }else{
            $(this).addClass('checked');
            count_ing=0;
            count_ing ++;
            $(this).find('span').text('+'+count_ing+' ');
            ingredients = $.map($('.add_ing_list li.checked'),function(el) {
    return $(el).text()
});
            ing_price += $(this).data('ord');
        }
      $('p').text(ingredients)

    });

});


  </script>
</head>

<body>
<p></p>
<ul class="add_ing_list">
    <li data-ord="25" data-id="1"><span class="count_ing"></span>Сыр (25 ₴)</li>
    <li data-ord="30" data-id="2"><span class="count_ing"></span>Курица(30 ₴)</li>
    <li data-ord="35" data-id="3"><span class="count_ing"></span>Соус(35 ₴)</li>
</ul>

</body>

</html>

rostik1991 · #5 (**permalink**) 03.11.2015, 16:15

Так

Спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript