Javascript-форум - Показать сообщение отдельно - Подсчет общей суммы на 3 и более ингредиента

рони · #12 (**permalink**) 29.12.2014, 10:45

EviLex,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type='text/css'>
  .container{
    margin-top:10px;
    width:340px;
  }

  ul{
    margin:0;
    padding:0;
  }

  #ingred>li{
    position:relative;
    list-style:none;
    border:rgb(153,51,0) solid 1px;
    border-radius:2px;
  }

  #ingred>li>span{
    display:none;
    cursor:pointer;
    position:absolute;
    right:5px;
    top:0px;
    color:red;
  }

  #ingred>li:hover>span{
    display:inline-block;
  }

  input{
    width:50px;
  }

  li p{
    margin:0;
  }

  li strong{
    font-size:12px;
  }

  #sumAll,h4{
    margin:0;
    padding:0;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
         var sakhar = [
             ['Карамель', 3.11, 0, 0.001, 0.777],
             ['Шоколад темный', 5.64, 0.054, 0.353, 0.526]
         ];
         var orekhi = [
             ['Арахис', 5.82, 0.263, 0.452, 0.097],
             ['Грецкий орех', 6.75, 0.138, 0.613, 0.102],
             ['Миндаль', 6.78, 0.186, 0.577, 0.136],
             ['Семя подсолнечника', 6.09, 0.207, 0.529, 0.05],
             ['Фундук', 7.37, 0.161, 0.669, 0.099]
         ];

         var cats = [
             [sakhar, 'Карамель, шоколад'],
             [orekhi, 'Орехи']
         ];

         var arr = [' Масса: ', ' кКал: ', ' Белки: ', ' Жиры: ', ' Углеводы: '];
         var opt = [];

         function sum() {
             var res = [0, 0, 0, 0, 0];
             $("#ingred select").each(function(indx, element) {
                 var parent = $(this).parents("li");
                 var val = +parent.find("input").val() || 0;
                 var a = $.map(opt[this.value], function(el, i) {
                     res[i + 1] += +(val * el).toFixed(2);
                     return "<strong>" + arr[i + 1] + "</strong>" + (val * el).toFixed(2)
                 });
                 res[0] += val;
                 parent.find("p").html(a)
             });
             res = res[0] ? $.map(res, function(el, i) {
                 return "<strong>" + arr[i] + "</strong>" + el.toFixed(2)
             }) : "";
             $("#sumAll").html(res)
         }

         var $sel = $("<select/>", {
             on: {
                 "change": sum
             }
         });
         $.each(cats, function(indx, el) {
             $("<optgroup/>", {
                 "label": el[1]
             }).appendTo($sel);
             $.each(el[0], function(ind, elem) {
                                  $("<option/>", {
                     "val": opt.length,
                     text: elem[0]
                 }).appendTo($sel);
               opt.push(elem.slice(1));

             })
         });
         var $inp = $('<label/>').append(
             $("<input/>", {
                 val: 1,
                 maxlength: "4",
                 placeholder: "вес",
                 on: {
                     "input": sum
                 }
             })).prepend(" Масса: ");
         $(".add-contact").click(function(event) {
             event.preventDefault();
             var $li = $("<li/>").appendTo("#ingred");
             $sel.clone(true, true).appendTo($li);
             $inp.clone(true, true).appendTo($li);
             var $p = $("<p/>").appendTo($li);
             var $span = $("<span/>", {
                 text: "x",
                 on: {
                     click: function() {
                         $li.remove();
                         sum()
                     }
                 }
             }).appendTo($li);
             sum()
         });

     });
  </script>
</head>

<body>
<div class="container">
    <ul id="ingred"></ul>
    <a href="#" class="add-contact">+ Добавить ингредиент</a>
    <h4>Всего:</h4>
    <div id="sumAll"></div>
</div>
</body>
</html>