jQuery实时计算教程：价格数量动态更新
2025-08-05 12:33:52
0浏览
收藏
文章不知道大家是否熟悉？今天我将给大家介绍《jQuery动态计算教程：实时价格与数量更新》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！
挑战：动态表单中的实时计算
在构建订单或购物车等Web应用时，常见需求是用户可以动态添加多个商品项。每个商品项包含商品名称、单价和购买数量。核心挑战在于，当用户选择商品（获取单价）或修改数量时，系统需要实时计算并更新总价。由于商品项是动态添加的，传统的直接事件绑定方式可能无法覆盖新生成的元素。
核心概念：事件委托与遍历计算
为解决动态元素事件绑定问题，我们将采用 事件委托（Event Delegation） 机制。事件委托允许我们将事件监听器绑定到一个父元素上，然后利用事件冒泡的原理，捕获其子元素（包括未来动态添加的子元素）上发生的事件。这比每次添加新元素都重新绑定事件更高效、更简洁。
总价的计算则通过遍历所有商品行的价格和数量输入框，将每行的“单价 × 数量”累加起来实现。
HTML 结构解析
为了方便 jQuery 操作，我们需要一个清晰的 HTML 结构。每个商品项应包含选择商品、显示价格和输入数量的元素。以下是关键部分的简化结构：
<!-- 初始商品项，或作为动态添加的模板 -->
<div class="item-details-box">
<div class="form-group">
<label class="control-label">商品</label>
<div class="col-lg-10">
<!-- 为商品选择框添加类名，便于事件委托 -->
<select class="form-control item-name" name="itemname[]">
<option disabled selected>选择商品</option>
<?php echo getValues($pdo); // PHP函数用于填充商品选项 ?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label">价格</label>
<div class="col-lg-10">
<!-- 为价格输入框添加类名，并设置为只读 -->
<input type="text" class="form-control price" name="price[]" placeholder="-" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">数量</label>
<div class="col-lg-10">
<!-- 为数量输入框添加类名 -->
<input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
</div>
</div>
</div>
<!-- 动态添加商品项的容器 -->
<div id="append-area"></div>
<!-- 添加商品按钮 -->
<button id="add-item">添加商品</button>
<!-- 总价显示框 -->
<input type="text" id="total" placeholder="-" readonly class="form-control">说明：
- item-details-box 类：可以作为每个商品项的父容器，方便定位内部元素。
- item-name 类：用于商品选择框，触发价格获取。
- price 类：用于价格显示框。
- quantity 类：用于数量输入框，触发总价计算。
- name="itemname[]"、name="price[]"、name="quantity[]"：使用数组命名方式，方便后端接收多个商品数据。
PHP 后端服务（获取商品价格）
后端 PHP 脚本负责根据前端传入的商品名称（或ID）从数据库中查询对应的价格。
<?php
require 'DBConnection.php'; // 数据库连接文件
$price = '';
if(isset($_POST["code"])){ // 'code' 通常指商品ID或名称
$id = $_POST["code"];
// 预处理SQL语句，防止SQL注入
$get_price_stmt = $pdo->prepare("SELECT price FROM all_menu WHERE `item_name` = :item_name");
$get_price_stmt->bindParam(':item_name', $id);
$get_price_stmt->execute();
$row = $get_price_stmt->fetch(PDO::FETCH_ASSOC);
if ($row) {
$price = $row['price'];
}
echo number_format((float)$price, 2, '.', ''); // 格式化输出价格，确保为浮点数
}
?>说明：
- 使用 PDO 预处理语句是最佳实践，可有效防止 SQL 注入。
- number_format 函数用于格式化价格输出，确保其为数值类型且有固定的小数位数。
jQuery 实现详解
我们将使用 jQuery 来实现前端的交互逻辑。
1. 核心函数：计算总价
定义一个可复用的函数 calculateTotal()，它将遍历所有商品项，累加计算总价。
/**
* 计算所有商品项的总价并更新显示
*/
function calculateTotal() {
let totalSum = 0.0;
// 遍历所有具有 'item-details-box' 类的商品项
$('.item-details-box').each(function() {
const $currentRow = $(this); // 当前商品项的jQuery对象
// 获取价格和数量，并转换为浮点数，如果为空则默认为0
const price = parseFloat($currentRow.find('.price').val()) || 0;
const quantity = parseFloat($currentRow.find('.quantity').val()) || 0;
totalSum += price * quantity;
});
// 更新总价显示，保留两位小数
$('#total').val(totalSum.toFixed(2));
}2. 事件绑定：获取商品价格与实时计算
使用事件委托，为商品选择框和数量输入框绑定事件。
$(document).ready(function() {
// 使用事件委托，监听所有 '.item-name' 元素的 'change' 事件
// 无论是初始存在的还是动态添加的元素，都会被捕获
$(document).on('change', '.item-name', function() {
const $currentRow = $(this).closest('.item-details-box'); // 获取当前商品项的父容器
const itemCode = $(this).val(); // 获取选中的商品值
if (itemCode) {
$.ajax({
type: 'POST',
url: 'pages/GetPrice.php', // PHP后端服务地址
data: { code: itemCode },
success: function(data) {
// 更新当前商品项的价格字段
$currentRow.find('.price').val(parseFloat(data).toFixed(2));
calculateTotal(); // 价格更新后，重新计算总价
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("Error fetching price:", errorThrown);
alert("获取价格失败: " + errorThrown);
}
});
} else {
// 如果未选择商品，清空价格并重新计算总价
$currentRow.find('.price').val('');
calculateTotal();
}
});
// 使用事件委托，监听所有 '.quantity' 元素的 'input' 事件
// 'input' 事件在值改变时立即触发，提供更好的实时体验
$(document).on('input', '.quantity', function() {
calculateTotal(); // 数量改变时，立即计算总价
});
// 页面加载时，执行一次总价计算（如果页面上已有商品）
calculateTotal();
});3. 动态添加商品行
为“添加商品”按钮绑定点击事件，每次点击时生成新的商品项 HTML 并追加到指定容器。
$(document).ready(function() {
// ... (上面的事件绑定代码) ...
let nextRowID = 0; // 用于区分动态生成的元素，虽然有了类名，但有时仍需唯一ID
$('#add-item').click(function(e) {
e.preventDefault(); // 阻止按钮默认行为
nextRowID++; // 递增ID
// 构建新的商品项HTML字符串
// 注意：这里的PHP代码 `getValues($pdo)` 需要确保在前端渲染时可用，
// 或者通过AJAX动态获取商品列表填充select
const newRowHtml = `
<div class="item-details-box">
<div class="form-group">
<label class="control-label">商品</label>
<div class="col-lg-10">
<select class="form-control item-name" name="itemname[]" id="itemname${nextRowID}">
<option disabled selected>选择商品</option>
<?php echo getValues($pdo); ?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label">价格</label>
<div class="col-lg-10">
<input type="text" class="form-control price" name="price[]" id="price${nextRowID}" placeholder="-" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">数量</label>
<div class="col-lg-10">
<input class="form-control quantity" type="number" name="quantity[]" id="quantity${nextRowID}" value="0" min="1">
</div>
</div>
</div>
`;
// 将新行追加到容器中
$('#append-area').append(newRowHtml);
// 动态添加后，如果需要立即触发某些逻辑，可以在这里调用
// 例如：如果新添加的行有默认值，可能需要重新计算总价
calculateTotal();
});
});完整代码示例
将上述 HTML、PHP（示意）和 jQuery 代码整合，构成一个可运行的示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态商品价格与数量计算</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
/* 样式仅为示例，可根据项目需要调整 */
body { font-family: Arial, sans-serif; margin: 20px; }
.item-details-box { border: 1px solid #ccc; padding: 15px; margin-bottom: 15px; border-radius: 5px; }
.form-group { margin-bottom: 10px; display: flex; align-items: center; }
.form-group label { flex: 0 0 80px; text-align: right; margin-right: 10px; }
.form-group .col-lg-10 { flex: 1; }
.form-control { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
#total { font-weight: bold; font-size: 1.2em; margin-top: 20px; }
#add-item { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
#add-item:hover { background-color: #0056b3; }
</style>
</head>
<body>
<h1>订单详情</h1>
<!-- 初始商品项 -->
<div class="item-details-box">
<div class="form-group">
<label class="control-label">商品</label>
<div class="col-lg-10">
<select class="form-control item-name" name="itemname[]">
<option disabled selected value="">选择商品</option>
<?php
// 假设 getValues($pdo) 返回类似以下HTML字符串
// <option value="ItemA">商品A</option><option value="ItemB">商品B</option>
// 在实际应用中，这里应连接数据库获取
echo '<option value="ItemA">商品A</option>';
echo '<option value="ItemB">商品B</option>';
echo '<option value="ItemC">商品C</option>';
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label">价格</label>
<div class="col-lg-10">
<input type="text" class="form-control price" name="price[]" placeholder="-" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">数量</label>
<div class="col-lg-10">
<input class="form-control quantity" type="number" name="quantity[]" value="0" min="1">
</div>
</div>
</div>
<!-- 动态添加商品项的容器 -->
<div id="append-area"></div>
<!-- 添加商品按钮 -->
<button id="add-item">添加商品</button>
<div class="form-group" style="margin-top: 20px;">
<label class="control-label">总价</label>
<div class="col-lg-10">
<input type="text" id="total" placeholder="-" readonly class="form-control">
</div>
</div>
<script>
$(document).ready(function() {
// 模拟PHP getValues函数，实际应从后端获取
function getValuesMock() {
return '<option value="ItemA">商品A</option>' +
'<option value="ItemB">商品B</option>' +
'<option value="ItemC">商品C</option>';
}
// 模拟GetPrice.php后端响应
function getPriceMock(itemCode) {
const prices = {
'ItemA': 10.50,
'ItemB': 25.00,
'ItemC': 5.75
};
return prices[itemCode] ? prices[itemCode].toFixed(2) : '0.00';
}
/**
* 计算所有商品项的总价并更新显示
*/
function calculateTotal() {
let totalSum = 0.0;
$('.item-details-box').each(function() {
const $currentRow = $(this);
const price = parseFloat($currentRow.find('.price').val()) || 0;
const quantity = parseFloat($currentRow.find('.quantity').val()) || 0;
totalSum += price * quantity;
});
$('#total').val(totalSum.toFixed(2));
}
// 1. 事件委托：处理商品选择和数量变化
$(document).on('change', '.item-name', function() {
const $currentRow = $(this).closest('.item-details-box');
const itemCode = $(this).val();
if (itemCode) {
// 实际应用中这里是 $.ajax 调用 GetPrice.php
// $.ajax({
// type: 'POST',
// url: 'pages/GetPrice.php今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
电脑电源接口松动怎么解决
- 上一篇
- 电脑电源接口松动怎么解决
- 下一篇
- Vue组件结构：template与script如何配合
查看更多
最新文章
-
- 文章 · php教程 | 14分钟前 | URL参数 PHP跳转 HTTP头部 Cache-Control 清除浏览器缓存
- PHP跳转页面并清除缓存技巧
- 337浏览 收藏
-
- 文章 · php教程 | 15分钟前 |
- PHP正确嵌入HTML和变量的方法
- 198浏览 收藏
-
- 文章 · php教程 | 36分钟前 |
- PHP网站云服务器部署教程及环境配置指南
- 443浏览 收藏
-
- 文章 · php教程 | 49分钟前 |
- PHP错误调试技巧与Xdebug使用详解
- 108浏览 收藏
-
- 文章 · php教程 | 1小时前 |
- JS动态加载元素事件绑定失败怎么解决
- 468浏览 收藏
-
- 文章 · php教程 | 1小时前 |
- Symfony路由前缀与多语言配置优化
- 342浏览 收藏
-
- 文章 · php教程 | 1小时前 |
- PHP批量删除报错解决与逻辑详解
- 296浏览 收藏
-
- 文章 · php教程 | 1小时前 |
- PHP使用cURL发送HTTP请求教程
- 226浏览 收藏
-
- 文章 · php教程 | 1小时前 |
- PHP高精度时间获取与耗时计算技巧
- 262浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
查看更多
AI推荐
-
- ChatExcel酷表
- ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
- 3197次使用
-
- Any绘本
- 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
- 3410次使用
-
- 可赞AI
- 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
- 3440次使用
-
- 星月写作
- 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
- 4548次使用
-
- MagicLight
- MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
- 3818次使用
查看更多
相关文章
-
- PHP技术的高薪回报与发展前景
- 2023-10-08 501浏览
-
- 基于 PHP 的商场优惠券系统开发中的常见问题解决方案
- 2023-10-05 501浏览
-
- 如何使用PHP开发简单的在线支付功能
- 2023-09-27 501浏览
-
- PHP消息队列开发指南：实现分布式缓存刷新器
- 2023-09-30 501浏览
-
- 如何在PHP微服务中实现分布式任务分配和调度
- 2023-10-04 501浏览
