Динамическое создание суммы

276

11 февраля 2017, 09:22

Здравствуйте! Есть динамически создаваемый блок

    <input name="items[0].quantity" id="items0quantity" 
    style="width: 100%; display: none;" class="quantity-slider count" 
    data-slider-ticks="[0,1,2,3,4,5,6,7,8,9,10]" data-slider-value="8" 
    data-provide="slider" data-slider-handle="square" 
    data-slider-ticks-labels="[&quot;0&quot;,&quot;10&quot;,&quot;20&quot;,&quot;30&quot;,&quot;40&quot;,&quot;50&quot;,&quot;60&quot;,&quot;70&quot;,&quot;80&quot;,&quot;90&quot;,&quot;100&quot;]" 
    data-slider-min="1" data-slider-max="11" data-slider-step="1" 
    data-slider-tooltip="hide" data-value="5" value="5">

в app.js считываю по id и вывожу на экран

    var calculate = function() {
    var arrRes = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    var index0 = parseInt($('#items0quantity').attr('data-value'));//0
    var index1 = parseInt($('#items1quantity').attr('data-value'));//1
    var total = arrRes[index0] + arrRes[index1];//2

    $('#changeCount .cost').text(total);
};

Но не могу придумать, как сделать так, чтобы строки //0 //1 создавались динамически в зависимости от считываемого id

Answer 1

Можно выбрать все поля по общему классу, и работать с ними.

function getSum() { 
  return $('.count') 
    .map(function(){ 
      return $(this).val() | 0; 
    }).toArray() 
    .reduce((c, qty) => c += qty); 
} 
function update() { 
  $('output').html(getSum()); 
} 
 
$('.count').change(update)

<input class="count" type="number"><br/> 
<input class="count" type="number"><br/> 
<input class="count" type="number"><br/> 
<hr/> 
<output></output> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>