Расчет порционных количеств

Question

Я сейчас пытаюсь оформить что-то вроде кулинарной книги и сейчас достигаю своих пределов :). Вероятно, просто, но в настоящее время я не могу найти хорошее решение.

Администратор сайта создает рецепты с количеством ингредиентов, которые вводятся вместе с количеством порции (например, количество человек). Теперь я хотел бы рассчитать количество ингредиентов, когда посетитель веб-сайта изменяет количество порции.

Может быть, кто-то может мне помочь, HTML в настоящее время выглядит так:

<div class="row ingredients">
    <div class="col col-md-6 ingredientlist">
        <h2>Ingredients</h2>
        <ul>
            <li>
                <div class="quantity-unit">
                    <span class="quantity">550</span>
                    <span class="unit">g</span>
                </div>
                <span class="label">XXX</span>
            </li>
            <li>
                <div class="quantity-unit">
                    <span class="quantity">50</span>
                    <span class="unit">g</span>
                </div>
                <span class="label">YYY</span>
            </li>
        </ul>
    </div>

    <div class="col col-md-6 portions">
        <h2><input class="portionsamount" type="number" min="0" max="1000" value="12">Portions</h2>
    </div>
</div>

КаждыйПоэтому «li> div.quantity-unit» должен вычислять «.quantity» с помощью «.portionsamount».

В этом случае вычисление должно работать следующим образом: (.quantity / .portionsamount) * new.quantity <- это может быть введенная переменная. </p>

Заранее спасибо Nico

Answer 1

Немного трудно понять вашу последнюю формулу -> (.quantity / .portionsamount) * new.quantity. Как насчет этого фрагмента? Он умножается на 550 г / 12 (и 50 г / 12) на range value.

  

var ar = []; // array of ingrid-s
var i = 0;   // counter
var dq = Number($('.def_quant').text());   // default value (first one was 12)
$('.portionsamount').val(dq);              // set class="portionsamount" value = default value

$('.quantity').each(function(){             // array of g/def_value 
   ar[i] = Number($(this).text())/dq; 
   i++;
}); 

$('.portionsamount').change(function(){ 

    var p = Number($(this).val());  // chosen value
    var o = 0;                      // counter

    $('.quantity').each(function(){ // set formula value to each ingrid 
        $(this).text((ar[o]*p*100).toFixed()/100); 
        o++;
    });    
});
$('.portionsamount').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ingredients">
    <div class="col col-md-6 ingredientlist">
        <h2>Ingredients</h2>
        <ul>            
            <div class="def_quant" style="display:none;">12</div>
            <li>
                 <div class="quantity-unit">
                     <span class="quantity">440</span>
                     <span class="unit">g</span>
                 </div>
                 <span class="label">XXX</span>
            </li>
            <li>
                <div class="quantity-unit">
                    <span class="quantity">550</span>
                    <span class="unit">g</span>
                </div>
                <span class="label">XXX</span>
            </li>
            <li>
                <div class="quantity-unit">
                    <span class="quantity">50</span>
                    <span class="unit">g</span>
                </div>
                <span class="label">YYY</span>
            </li>
        </ul>
    </div>

    <div class="col col-md-6 portions">
        <h2><input class="portionsamount" type="number" min="0" max="1000">Portions</h2>
    </div>
</div>