javascript - 当数量变化时如何计算表中的行总计

Question

我试图随着数量的增加更新每一行的总数，但只更新了一行。如何更新每一行？如何在其中添加 id 以使其更加动态？我使用的是 jQuery 版本 2.2.4。提前致谢。

<tr>
  <td class="col-sm-8 col-md-6">
    <div class="media">
      <a class="thumbnail pull-left" href="#"> <img src="img/bg-img/b3.jpg" style="width: 72px; height: 72px;" alt=""> </a>
      <div class="media-body">
        <h5 class="media-heading">
          <?php echo isset($carts['title']) ? $carts['title']: ''; ?>
        </h5>
      </div>
    </div>
  </td>
  <td class="col-sm-1 col-md-1 quantity" style="text-align: center">
    <input type="number" class="form-control" id="fname" oninput="myFunction()" value="1" label="">
  </td>
  <td class="col-sm-1 col-md-1 text-center pr-01 price"><strong><?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price'];  ?></strong></td>
  <input type="hidden" class="form-control" id="artprice" value="<?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price'];  ?>" label="">
  <td class="col-sm-1 col-md-1 text-center pr-01" id="total"><strong>$14.61</strong></td>
  <td class="col-sm-1 col-md-1">
    <div class="product" data-id="<?php echo $key; ?>">
      <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
    </td>
  </div>
</tr>

function myFunction() {
  var x = document.getElementById("fname") value;
  var str = $("#artprice").val();
  $('#total').html(str * x);
}

Answer 1

您的代码中存在几个问题。

• 有一个</div>在错误的地方。它位于 <td> 之外它属于
• #artprice输入位于表结构之外。它需要放置在 td 内
• 缺少 .之前value JS 中的属性。

然而最大的问题是因为你重复同样的id当您循环遍历以在 HTML 中创建这些行时，多个元素上的属性。 id 必须在 DOM 中是唯一的。

要修复此问题，请使用常见 class您需要查找的所有元素上的属性，然后使用 jQuery 的 DOM 遍历技术根据当前行检索它们。

另请注意，在下面的示例中，我使用了一个不显眼的事件处理程序。内联事件属性不再是良好实践，应尽可能避免。另外我删除了内联 style外部样式表中的属性和使用的规则。这两种方法都是首选，因为 Separation of Concerns原理。

话虽如此，试试这个:

jQuery($ => {
  $('.fname').on('input', function() {  
    let $row = $(this).closest('tr');
    let price = $row.find(".artprice").val();
    $row.find('.total strong').text('$' + (this.value * price).toFixed(2));
  });
});

.media a img {
  width: 72px;
  height: 72px;
}

td.quantity {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tr>
    <td class="col-sm-8 col-md-6">
      <div class="media">
        <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
        <div class="media-body">
          <h5 class="media-heading">Title</h5>
        </div>
      </div>
    </td>
    <td class="col-sm-1 col-md-1 quantity">
      <input type="number" class="form-control fname" value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price">
      <strong>$14.61</strong>
      <input type="hidden" class="form-control artprice" value="14.61" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$14.61</strong></td>
    <td class="col-sm-1 col-md-1">
      <div class="product" data-id="Key">
        <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
      </div>
    </td>
  </tr>
    <tr>
    <td class="col-sm-8 col-md-6">
      <div class="media">
        <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
        <div class="media-body">
          <h5 class="media-heading">Title</h5>
        </div>
      </div>
    </td>
    <td class="col-sm-1 col-md-1 quantity">
      <input type="number" class="form-control fname" value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price">
      <strong>$57.24</strong>
      <input type="hidden" class="form-control artprice" value="57.24" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$57.24</strong></td>
    <td class="col-sm-1 col-md-1">
      <div class="product" data-id="Key">
        <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
      </div>
    </td>
  </tr>
</table>

最后要注意的是 jQuery 2.2.4 现在有点过时了。您应该考虑升级到 3.x