用于jquery计算的每个函数

Question

以下是codepen的链接：to the codepen - >注意：您必须更改2个值中的一个才能看到结果。

我有2个固定的变量（var seiten和var monate）和最多12 * 3“动态”变量Starter1，KRW1，KPreis1，每个从1 tp 12（我添加了5个用于测试）。到目前为止计算工作，但仅适用于第一项。我不知道如何使用每个功能。

$(document).ready(function() {
function compute() {
      var seiten = $('#seiten').val();
      var monate = $('#monate').val();

      var Starter1 = $('#Starter1').val();
      var KRW1 = $('#KRW1').val();
      var KPreis1 = $('#KPreis1').val();

      var Starter2 = $('#Starter2').val();
      var KRW2 = $('#KRW2').val();
      var KPreis2 = $('#KPreis2').val();

      var Starter3 = $('#Starter3').val();
      var KRW3 = $('#KRW3').val();
      var KPreis3 = $('#KPreis3').val();

      var Starter4 = $('#Starter4').val();
      var KRW4 = $('#KRW4').val();
      var KPreis4 = $('#KPreis4').val();

      var Starter5 = $('#Starter5').val();
      var KRW5 = $('#KRW5').val();
      var KPreis5 = $('#KPreis5').val();

      var total1 = (((seiten * monate - Starter1) / KRW1) * KPreis1);
      var total2 = (((seiten * monate - Starter2) / KRW2) * KPreis2);
      var total3 = (((seiten * monate - Starter3) / KRW3) * KPreis3);
      var total4 = (((seiten * monate - Starter4) / KRW4) * KPreis4);
      var total5 = (((seiten * monate - Starter5) / KRW5) * KPreis5);



      if(total1 < 0 || total1 == null) { total1 == 0 ; } else { total1; }
      if(total2 < 0 || total2 == null) { total2 == 0 ; } else { total2; }
      if(total3 < 0 || total3 == null) { total3 == 0 ; } else { total3; }
      if(total4 < 0 || total4 == null) { total4 == 0 ; } else { total4; }
      if(total5 < 0 || total5 == null) { total5 == 0 ; } else { total5; }


      var total = total1 + total2 + total3 + total4 + total5;
      if(total < 0 || total == null) { total == 0 ; } else { total ; }


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

    $('#seiten, #monate').change(compute);

  ;

});

Answer 1

将每个项目包装在自己的容器中，这样你就可以遍历每个项目。

然后，您可以使用类，而不是使用ID，您可以在每个项目中使用相同的类。这使他们成为标准。

一旦它们是相似的结构，你在每个实例中使用find()

---

简化版：

function compute() {
  var seiten = $('#seiten').val();
  var monate = $('#monate').val();

  $('.item').each(function() {
    var $item = $(this)
    var Starter = $item.find('.Starter').val();
    var KRW = $item.find('.KRW').val();

    var total = seiten * Starter + monate * KRW;
    $item.find('.total').text(total);
  });
}

$('#seiten, #monate').change(compute);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="seiten">Seiten:</label>
  <input type="number" name="seiten" id="seiten" value="10" />

  <label for="monate">Monate:</label>
  <input type="number" name="monate" id="monate" value="10" />

  <!-- ITEM 1-->

  <div class="item">
    <div>Item 1</div>
    <input type="hidden" class="Starter" value="2" />
    <input type="hidden" name="KRW1" class="KRW" value="2" />
    <div class="total"></div>
  </div>

  <div class="item">
    <div>Item 2</div>
    <input type="hidden" class="Starter" value="20" />
    <input type="hidden" class="KRW" value="20" />
    <div class="total"></div>
  </div>