javascript - 在计算中使用输入字段的值,并将结果显示在另一个元素中
问题描述
我有一个购物车,每个产品都有价格、数量和小计字段。数量字段可以由用户更改,但其他字段是静态的。
当用户更改数量时,有没有办法计算小计?我想将数量乘以价格,然后更新小计,而不需要用户提交表单。此外,在计算小计时,也应更新总计。
我的代码是一个 Django 模板,看起来像这样,循环中的相关部分:
<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 %}
<tfoot>
<tr class="visible-xs">
<td class="text-center"><strong>Total 1.99</strong></td>
</tr>
<tr>
<td colspan="2" class="hidden-xs"></td>
<td class="hidden-xs text-center" id="total"><strong>Total </strong></td>
</tr>
</tfoot>
</table>
解决方案
您需要做的第一件事是对您的 HTML 代码进行一些小改动。由于您将列出多个产品,每个产品都有自己的价格、数量和小计,因此您需要使用class
or 数据属性而不是id
,因为它对id
整个文档是唯一的,并且 ID 只能使用一次。相关代码(循环内)应如下所示:
<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>
您还需要更新表格页脚,以便总单元格获得数据属性:
<td class="text-center" data-type="total"><strong>Total <span>0</span></strong></td>
(需要 span 元素,因此我们只能更新数字。)
下面的示例代码应该可以解决问题,当数量发生变化时更新小计。该代码可能无法在 Internet Explorer 中运行,因此请告诉我是否有此要求。我还添加了评论以帮助澄清在哪里发生了什么。
// 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));
推荐阅读
- java - 带有 id 和 activity_main 的 kotlin 中未解决的引用
- ios - 带有部分的快速表格视图无法使用搜索栏
- pip - 如何在 Airflow 中安装软件包?
- julia - 如何更改Julia中矩阵下三角的值并转换为上三角?
- image-processing - Spark 如何使用图像格式读取我的图像?
- vb.net - 如何修复缺少 CategoryName 错误消息?
- swift - 如何使用 Cloud Firestore 中的地理点设置 tableview 以放置离我当前位置最近的商店?
- sql-server - 通过 SQL Server 2016 中的 SSMS 识别 SSIS 中的数据源
- python - 为什么我的 for 循环没有遍历完整的熊猫列表
- rust - 如何从特征实现中返回 HashMap 键的迭代器?