Question

我有一个表单，用于为价格和总计创建div，以及用户选择数量的输入。我试图通过名称[]选择元素，并为每一行进行乘法运算。我遇到了for循环的问题，在每一行上运行乘法。

＆＃13;

var getLenthArray = $('div[name="total[]"]').map(function() {
  return $(this).val();
}).get();

var len = getLenthArray.length;

for (var x = 0; x < len; x++) {
  $('div[name="cost[]"], input[name="quantity[]"]').keyup(function() {
      $('div[name="total[]"]').text($('input[name="quantity[]"]').val() *
        $('div[name="cost[]"]').text));
  })
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div name="cost[]" id="1">5</div></td>
    <td><input name="quantity[]" id="1"></td>
    <td><div name="total[]" id="1">Total 1</div></td>
  </tr>
  <tr>
    <td><div name="cost[]" id="2">5</div></td>
    <td><input name="quantity[]" id="2"></td>
    <td><div name="total[]" id="2">Total 1</div></td>
  </tr>
  <tr>
    <td><div name="cost[]" id="3">5</div></td>
    <td><input name="quantity[]" id="3"></td>
    <td><div name="total[]" id="3">Total 1</div></td>
  </tr>
</table>

＆＃13;

Answer 1

第一个问题是您在代码的多个元素中重复了相同的id。这是无效的，因为它们必须是唯一的。要解决此问题，您可以使用类对元素进行分组。

从那里，您可以在所有input元素上使用input事件处理程序来计算更改时的总计。最后，您不需要为每个项目指定唯一名称，因为您可以从引发事件的input遍历DOM到父tr。然后，您可以使用find()来收集所需的元素和值。试试这个：

$('.quantity').on('input', function() {
  var $tr = $(this).closest('tr');
  var cost = parseFloat($tr.find('.cost').text()) || 0;
  var quantity = parseInt($(this).val(), 10) || 0;
  $tr.find('.total').text('Total: ' + cost * quantity);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div name="cost[]" class="cost">5</div></td>
    <td><input name="quantity[]" class="quantity" value="0"></td>
    <td><div name="total[]" class="total">Total: <span>0</span></div></td>
  </tr>
  <tr>
    <td><div name="cost[]" class="cost">5</div></td>
    <td><input name="quantity[]" class="quantity" value="0"></td>
    <td><div name="total[]" class="total">Total: <span>0</span></div></td>
  </tr>
  <tr>
    <td><div name="cost[]" class="cost">5</div></td>
    <td><input name="quantity[]" class="quantity" value="0"></td>
    <td><div name="total[]" class="total">Total: <span>0</span></div></td>
  </tr>
</table>

为每个生成的元素乘以值

1 个答案: