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>
这是javascript jquery代码
$('.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_totals 设置为第一个 p_price 的值。(并推断数量)
通过使用$(this).closest(".cart_item")
,您可以找到“最近的父母”,即.cart_item
.
然后使用cartitem.find(".p_price")
(等),您将获得与触发事件的 p_quantity 相同的 cart_item 内的 p_price。
给予:
$('.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()
推荐阅读
- reactjs - Github页面反应应用程序没有得到响应
- java - 在Java中,比较一个对象和一个常量值时“==”是Box还是Unbox?
- javascript - 按钮指向特定文件位置,但单击时使用另一个路径
- php - 在 PHP 中,如何获得两个时间戳之间的准确(非近似)总周数、月数和年数?
- node.js - 如何使用 react native fs 将选定的文件发送到节点服务器?
- amazon-web-services - AWS Cognito 从用户池中删除所有用户
- flutter - Flutter中如何实现Scroll Controller(Scroll Widget)?
- active-directory - 如何使用ldp.exe中的搜索功能搜索类(用户)属性(必须包含)
- javascript - taggingJS 在输入时抛出错误。又名句号
- python - 如何在 Python 中选择任何网站的所有 XPATH