jquery - 使用 JQuery 将相同的计算应用于不同的输入

Question

我正在尝试编写一些简单的 HTML/jquery，将相同的计算应用于不同的字段。

我已将问题简化为以下 HTML:

    <h1>Multiplication by line</h1>
<table>
  <tr>
    <td>Number 1</td>
    <td>Number 2</td>
    <td>Result</td>
  </tr>
  <!-- LINE ITEM START -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0 </div>
      </td>
    </tr>
  </div>
  <!-- LINE ITEM END -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0</div>
      </td>
    </tr>
  </div>

和 Jquery:

$(document).ready(function() {

  $(".lineitem").each(function() {

    function compute() {

      var a = $('.a').val();
      var b = $('.b').val();
      var total = (a * b);

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

    }

    $('.b, .a').change(compute);

  })
});

但这会根据第一行的数据条目为每一行返回相同的结果。我显然希望用户在每一行中输入不同的值，并在每一行中得到不同的结果。我尝试如下使用“each”和“$(this).children”，但没有用:

$(document).ready(function() {


$(".lineitem").each(function () {

    function compute () {

        var a = $(this).children('.a').val();
        var b = $(this).children('.b').val();
        var total = (a*b);

        $(this).children('.total').text(total);

    }

        $('.b, .a').change(compute);

      })}); */

Here's a JSFiddle with everything.

真心希望有人能帮忙!我已经进行了相当多的搜索，但对这里的基本问题并不满意……如果重复，我深表歉意

Answer 1

这是一个 working Fiddle

您的代码中的错误是您使用类来处理元素，但您没有限制计算只发生在所需的行上。所以解决方法是当输入元素发生变化时，找到最接近它的包裹 tr，现在找到这个 tr 中的项目并进行计算。

更改您的函数以将计算限制在特定行。

 function compute() {    
  var $parentTr = $(this).closest('tr'); // find the tr which wraps this element.
  var a = $parentTr.find('.a').val();// find .a within this tr
  var b = $parentTr.find('.b').val();// find .b within this tr
  var total = (a * b);

  $parentTr.find('.total').text(total);// change .total within this tr
}