Javascript 根据购物车的数量增减计算每行总价。（数量*价格）

我想随着数量的增加或减少计算每个项目的总价，但是，当我增加数量时，第一行的价格会放在所有其他行中

这里是Html代码

<form method="post" action="n/GetPostData.php">
  <?php 
    $total=0; $all_cart_products=$shoping_cart->allShopingcartValue($id); 
    while ($row=mysqli_fetch_assoc($all_cart_products)) { ?>
  <!-- Shopin Cart -->
  <tr class="cart_item">
    <td class="product-remove">
      <a id="" class="remove"  href="<?php echo $row['shoping_cart_id']; ?>">×</a>
    </td>
    <input id="p_id" type="hidden" name="shoping_cart_id" value="<?php echo $row['shoping_cart_id'] ?>">
    <td class="product-thumbnail">
      <a href="single-product.html"><img width="180" height="180" src="assets/images/products/2.jpg" alt=""></a>
      <!-- <input type="hidden" name="image" value=""> -->
    </td>
    <td data-title="Product" class="product-name">
      <a href="single-product.html"><?php echo $row['name']; ?></a>
      <input type="hidden" name="product_id[]" value="<?php echo $row['product_id']; ?>">
    </td>
    <td data-title="Price" class="product-price">
      <span class="amount">$<?php echo $row['price']; ?></span>
      <input type="hidden" name="product_price[]" value="<?php echo $row['price']; ?>" class="p_price">
    </td>
    <td data-title="Quantity" class="product-quantity">
      <input type="number" name="product_quantity[]" class="input-text qty text p_quantity" title="Qty" value="<?php echo $row['quantity']; ?>" max="29" min="0" step="1">
    </td>
    <td data-title="Total" class="product-subtotal">
      <span class="amount p_total_s">$<?php echo $row['total']; ?></span>
      <input type="hidden" name="product_total[]" value="<?php echo $row['total']; ?>" class="p_total">
    </td>
  </tr>
  <tr>
    <td class="actions" colspan="6">
      <input type="submit" value="Update Cart" name="update_cart" class="button">
      <span></span>
    </td>
  </tr>
  </tbody>

  </table>
</form>

$('.p_quantity').change(function() {
    var price = $('.p_price').val();
    var quantity = $('.p_quantity').val();
    $('.p_total').text(price * quantity);
});

---

您需要找到与输入相关的其他元素

当您使用

$（“.p_price”）

时，它会找到

class=p_price

的所有元素

在集合上使用

.val（）

时，它会给出第一个值。
在集合上使用

.text（）

时，它会设置每个元素中的文本

因此

$（“.p_total”）.text（$（“.p_price”）.val（））

将所有p_总计设置为第一个p_价格的值。（并外推到数量）

通过使用

$（this）.closest（“.cart\u item”）

可以找到

.cart\u item

的“最近父项”

然后使用

cartitem.find（“.p\u price”）

（等）可以获得与触发事件的p\u数量在同一个cart\u项目中的p\u价格

给予：

$('.p_quantity').change(function() {
    var cartitem = $(this).closest(".cart_item");
    var price = cartitem.find('.p_price').val();
    //var quantity = cartitem.find('.p_quantity').val();
    var quantity = $(this).val();  // same as above, no need to re-find this
    cartitem.find('.p_total').text(price * quantity);
});

最后一行可能是：

    cartitem.find('.p_total_s').text(price * quantity);
    cartitem.find('.p_total').val(price * quantity);

由于p_total是一个隐藏输入，因此应使用

.val（）

只需替换行$（'.p_total'）.text（价格*数量）；与：

---

使用val而不是文本。

你能解释一下吗？有什么解释吗？OPs的主要问题是“当我增加数量时，第一行的价格会放在所有其他行中”-这不会解决这个问题。但是，是的，您应该使用

.val（）

作为隐藏输入（我已经在我的答案中添加了一条注释，以便不更改此注释）。

$('.p_total').val(price * quantity);