我有一個購物車，其中包含每種產(chǎn)品的價格、數(shù)量和小計字段。用戶可以更改數(shù)量字段，但其他字段是靜態(tài)的。當用戶更改數(shù)量時，有沒有辦法計算小計？我想將數(shù)量乘以價格，然后更新小計，而不需要用戶提交表單。此外，計算小計時，總計也應(yīng)更新。此處的視覺表示我的代碼是一個 Django 模板，如下所示，相關(guān)部分位于循環(huán)中：<div class="container"><table id="cart" class="table table-hover table-condensed"> <thead> <tr> <th style="width:50%">Product</th> <th style="width:10%">Price</th> <th style="width:8%">Quantity</th> <th style="width:22%" class="text-center">Subtotal</th> </tr> </thead>{% for crops_ordered_names,crops_ordered_images,crops_ordered_cost,crops_ava in total %} <tbody> <tr> <td data-th="Product"> <div class="row"> <div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div> <div class="col-sm-10"> <h4 class="nomargin">{{crops_ordered_names}}</h4> <p>Available amount: {{crops_ava}}</p> </div> </div> </td> <td data-th="Price" id="price">{{crops_ordered_cost}}</td> <td data-th="Quantity"> <input type="number" class="form-control text-center" id="quan" min="1" max="{{crops_ava}}"> </td> <td data-th="Subtotal" class="text-center" id="subtotal"></td> <td class="actions" data-th=""> <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button> </td> </tr> </tbody>{% endfor %}
1 回答
胡說叔叔
TA貢獻1804條經(jīng)驗 獲得超8個贊
您需要做的第一件事是對 HTML 代碼進行一些小更改。由于您將列出多個產(chǎn)品，每個產(chǎn)品都有自己的價格、數(shù)量和小計，因此您需要使用 class 或數(shù)據(jù)屬性而不是 id，如 id 對于整個文檔來說是唯一的，并且 ID 只能使用一次。相關(guān)代碼（循環(huán)內(nèi)）應(yīng)如下所示：
<tbody>
<tr>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
<div class="col-sm-10">
<h4 class="nomargin">{{crops_ordered_names}}</h4>
<p>Available amount: {{crops_ava}}</p>
</div>
</div>
</td>
<td data-th="Price" data-type="price">{{crops_ordered_cost}}</td>
<td data-th="Quantity">
<input type="number" class="form-control text-center" data-type="quan" min="1" max="{{crops_ava}}">
</td>
<td data-th="Subtotal" class="text-center" data-type="subtotal"></td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
您還需要更新表頁腳，以便總單元格獲得數(shù)據(jù)屬性：
<td class="text-center" data-type="total"><strong>Total <span>0</span></strong></td>
（需要 span 元素，因此我們只能更新數(shù)字。）
下面的示例代碼應(yīng)該可以解決這個問題，在數(shù)量更改時更新小計。該代碼可能無法在 Internet Explorer 中運行，因此請告訴我這是否是必需的。我還添加了評論以幫助澄清在哪里發(fā)生的事情。
// Find all quantity inputs, and the element where we display the total.
const quantityInputs = document.querySelectorAll('[data-type="quan"]');
const total = document.querySelector('[data-type="total"] span');
// For simplicity, we calculate the total in a separate function.
const calculateTotal = () => {
// Find all the subtotals.
const subtotals = document.querySelectorAll('[data-type="subtotal"]');
let calculatedTotal = 0;
// Loop through all the subtotals, and add them to the final total.
Array.from(subtotals).forEach((subtotal) => {
calculatedTotal += Number(subtotal.textContent);
});
// Then return the total.
return calculatedTotal;
}
// As above, we use a separate function to calculate the subtotal for a product.
const calculateSubtotal = (product) => {
// The input event will fire when the value of the quantity field is changed.
product.addEventListener('input', () => {
/*
* With multiple prices and subtototals, we need to look for them going
* upwards from the quantity field, using the parent elements (first the
* table cell, then the table row).
*/
const parentRow = product.parentNode.parentNode;
// Then find the price and subtotal for this product.
const price = parentRow.querySelector('[data-type="price"]');
const subtotal = parentRow.querySelector('[data-type="subtotal"]');
// And finally, update the subtotal and the total.
subtotal.textContent = price.textContent * product.value;
total.textContent = calculateTotal();
});
}
// Loop through all the quantity inputs and wait for the subtotal to change.
Array.from(quantityInputs).forEach((element) => calculateSubtotal(element));
- 1 回答
- 0 關(guān)注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消