jquery - jQuery计算的每个函数

Question

这是 codepen 的链接：到 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);

  ;

});

标签： jquerylisteach

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>