javascript - 选中时 2 组函数值的 jQuery 绝对值

Question

Working jsfiddle

对 jQuery/javacript 来说还是个新手，但我有 2 个函数，它们在检查时对隐藏值求和，并且我需要生成它们差异的绝对值:

$(document).ready(function() {

  function sumRows() {
    var sum = 0,
      total = $('#total');
    $('#myteam tr').each(function() {
      var amount = $(this).find('input[name="amount"]'),
        checkbox = $(this).find('input[name="include"]');
      if (checkbox.is(':checked') && amount.val().length > 0) {
        sum += parseInt(amount.val(), 10);
      }
    });
    total.text(sum);
  }

  function sumRows2() {
    var sum2 = 0,
      total2 = $('#total2');
    $('#otherteam tr').each(function() {
      var amount2 = $(this).find('input[name="amount2"]'),
        checkbox2 = $(this).find('input[name="include2"]');
      if (checkbox2.is(':checked') && amount2.val().length > 0) {
        sum2 += parseInt(amount2.val(), 10);
      }
    });
    total2.text(sum2);
  }

  $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
  $('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);

});`

这是一个更简单的 HTML，可以向您展示我想要做什么，我希望差异可以显示每个团队选中的框:

<table>
  <tr>
    <td colspan="2">Difference:
      <span id="diff">0</span>
    </td>
  </tr>
  <tr>
    <td>My Team:
      <span id="total">0</span>
    </td>
    <td>Other Team:
      <span id="total2">0</span>
    </td>
  </tr>
  <tr>
    <td>
      <table id="myteam">
        <tr>
          <td>
            <input type="hidden" value="100" name="amount">
          </td>
          <td>
            <input type="checkbox" name="include">
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" value="200" name="amount">
          </td>
          <td>
            <input type="checkbox" name="include">
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" value="300" name="amount">
          </td>
          <td>
            <input type="checkbox" name="include">
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table id="otherteam">
        <tr>
          <td>
            <input type="hidden" value="100" name="amount2">
          </td>
          <td>
            <input type="checkbox" name="include2">
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" value="200" name="amount2">
          </td>
          <td>
            <input type="checkbox" name="include2">
          </td>
        </tr>
        <tr>
          <td>
            <input type="hidden" value="300" name="amount2">
          </td>
          <td>
            <input type="checkbox" name="include2">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

$(document).ready(function() {

  function sumRows() {
    var sum = 0,
      total = $('#total');
    $('#myteam tr').each(function() {
      var amount = $(this).find('input[name="amount"]'),
        checkbox = $(this).find('input[name="include"]');
      if (checkbox.is(':checked') && amount.val().length > 0) {
        sum += parseInt(amount.val(), 10);
      }
    });
    total.text(sum);    
    $("#diff").text(Math.abs(sum - parseInt(total2.innerText)));
  }

  function sumRows2() {
    var sum2 = 0,
      total2 = $('#total2');
    $('#otherteam tr').each(function() {
      var amount2 = $(this).find('input[name="amount2"]'),
        checkbox2 = $(this).find('input[name="include2"]');
      if (checkbox2.is(':checked') && amount2.val().length > 0) {
        sum2 += parseInt(amount2.val(), 10);
      }
    });
    total2.text(sum2);
    $("#diff").text(Math.abs(parseInt(total.innerText)- sum2));
  }

  // calculate sum anytime checkbox is checked or amount is changed
  $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows);
  $('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2);

});