如何以动态形式“递增”属性？

Question

我是编程新手，因此，如果您能帮助我编写代码，我真的非常感谢。通过引用此链接，我设法解决了之前的问题：

previous row is not computing/updating from appended rows using jquery

但是然后我必须将该代码与此结合起来：

function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
         var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
         var id = 'id_' + name;
         $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    fullrowname = selector.substring(0,selector.length - 4) + 'not(:last)'
    var conditionRow = $(fullrowname);
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('<span class="fas fa-minus" aria-hidden="true"></span>');
    return false;
}

$("input.quantity,input.price").on('change', function() {
    Total($(this).attr("for"));
});  

ID每次我单击添加按钮时都会完美增加，但是for =“ 0”属性不会增加。因此，我对动态输入的计算不起作用：（

你们能告诉我如何在上面的代码中增加“ for”属性的方法吗？

Answer 1

您正在使用的方法以及您先前得到的答案都是有缺陷的。在运行时以动态内容生成的增量id属性是一种反模式，在IMO中，永远不应使用。代码很快就变得难以维护，冗长，混乱。

一种更好的方法是对按行为分组的元素使用通用类。然后，您可以对所有这些元素使用单个委托事件处理程序。在这些事件处理程序中，您可以使用DOM遍历方法将元素彼此关联并与其交互。

此外，您不应在JS逻辑中放入那么多HTML代码。理想情况下，应该根本不存在任何内容。要解决此问题，您可以改为clone()现有DOM元素，并将其附加到新位置以创建新行。

最后，请注意，在发送AJAX请求时，您应该挂钩submit的form事件，而不是提交按钮的click。

话虽如此，请尝试以下操作：

jQuery($ => {
  let $table = $('#articles');

  $table.on('input', '.quantity, .price', function() {
    let $row = $(this).closest('tr');    
    let qty = $row.find('.quantity').val();
    var price = $row.find('.price').val();
    var total = (qty * price).toFixed(2);
    $row.find('.total').val(total);  
  })

  $table.on('click', '.btn-remove', function() {
    if ($table.find('tr').length > 1) // prevent deletion of all rows
      $(this).closest('tr').remove();
  })
 
  $table.on('click', '.btn-add', function() {
    let $clone = $table.find('tr:first').clone().appendTo($table);
    $clone.find('.quantity, .price').val('0');
    $clone.find('.total').val('');
  });

  $('#add_name').on('submit', function(e) {
    e.preventDefault();
    let $form = $(this);
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $form.serialize(),
      success: function(data) {
        $form[0].reset();
      }
    });
  });
});

table tr:first-of-type td:last-of-type button {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <br />
  <br />
  <div class="form-group">
    <form name="add_name" id="add_name">
      <div class="table-responsive">
        <table class="table table-bordered" id="articles">
          <tr class="rrjeshta">
            <td><input value="0" type="number" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" /></td>
            <td><input value="0" type="number" name="price[]" placeholder="price" class="form-control name_list price" /></td>
            <td><input type="number" name="total[]" placeholder="total" class="form-control name_list total" readonly /></td>
            <td><button type="button" name="add" class="btn btn-success btn-add">Add new</button></td>
            <td><button type="button" name="remove" class="btn btn-danger btn-remove">X</button></td>
          </tr>
        </table>
        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
      </div>
    </form>
  </div>
</div>