jQuery实现简单购物车页面
功能描述：
当全选按钮被按下时，所有商品的小复选框（以及另外一个全选按钮）的选中状态跟按下的全选按钮保持一致；
当用户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态；
用户可以点击 + - 增加或减少商品数量，也可以直接在文本框修改数量，数量修改后 后边的小计也会相应改变；
用户可以进行删除操作，删除单个商品、选中商品以及清理购物车；
当用户进行操作时，下面的已选商品件数以及总额也会有相应变化
准备工作：
首先将css样式以及jq、js文件引入，jq文件要放在js文件上边
<link rel="stylesheet" href="css/car.css">
<script src="js/jquery.min.js"></script>
<script src="js/car.js"></script>
HTML代码及CSS样式：
<body>
<div class="w">
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价： <em>￥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div> <!-- cart-floatbar end -->
</div> <!-- cart-warp end -->
</div> <!-- w end -->
</body>
car.html
* {
margin:;
padding: 0
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
body {
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666
}
.w {
width: 1200px;
margin: 0 auto;
}
.cart-thead {
height: 32px;
line-height: 32px;
margin: 5px 0 10px;
padding: 5px 0;
background: #f3f3f3;
border: 1px solid #e9e9e9;
border-top:;
position: relative;
}
.cart-thead>div,
.cart-item>div {
float: left;
}
.t-checkbox,
.p-checkbox {
height: 18px;
line-height: 18px;
padding-top: 7px;
width: 122px;
padding-left: 11px;
}
.t-goods {
width: 400px;
}
.t-price {
width: 120px;
padding-right: 40px;
text-align: right;
}
.t-num {
width: 150px;
text-align: center;
}
.t-sum {
width: 100px;
text-align: right;
}
.t-action {
width: 130px;
text-align: right;
}
.cart-item {
height: 160px;
border-style: solid;
border-width: 2px 1px 1px;
border-color: #aaa #f1f1f1 #f1f1f1;
background: #fff;
padding-top: 14px;
margin: 15px 0;
}
.check-cart-item {
background: #fff4e8;
}
.p-checkbox {
width: 50px;
}
.p-goods {
margin-top: 8px;
width: 565px;
}
.p-img {
float: left;
border: 1px solid #ccc;
padding: 5px;
}
.p-msg {
float: left;
width: 210px;
margin: 0 10px;
}
.p-price {
width: 110px;
}
.quantity-form {
width: 80px;
height: 22px;
}
.p-num {
width: 170px;
}
.decrement,
.increment {
float: left;
border: 1px solid #cacbcb;
height: 18px;
line-height: 18px;
padding: 1px 0;
width: 16px;
text-align: center;
color: #666;
background: #fff;
margin-left: -1px;
}
.itxt {
float: left;
border: 1px solid #cacbcb;
width: 42px;
height: 18px;
line-height: 18px;
text-align: center;
padding: 1px;
margin-left: -1px;
font-size: 12px;
font-family: verdana;
color: #333;
-webkit-appearance: none;
}
.p-sum {
font-weight:;
width: 145px;
}
.cart-floatbar {
height: 50px;
border: 1px solid #f0f0f0;
background: #fff;
position: relative;
margin-bottom: 50px;
line-height: 50px;
}
.select-all {
float: left;
height: 18px;
line-height: 18px;
padding: 16px 0 16px 9px;
white-space: nowrap;
}
.select-all input {
vertical-align: middle;
display: inline-block;
margin-right: 5px;
}
.operation {
float: left;
width: 200px;
margin-left: 40px;
}
.clear-all {
font-weight:;
margin: 0 20px;
}
.toolbar-right {
float: right;
}
.amount-sum {
float: left;
}
.amount-sum em {
font-weight:;
color: #E2231A;
padding: 0 3px;
}
.price-sum {
float: left;
margin: 0 15px;
}
.price-sum em {
font-size: 16px;
color: #E2231A;
font-weight:;
}
.btn-area {
font-weight:;
width: 94px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
font-size: 18px;
font-family: "Microsoft YaHei";
background: #e54346;
overflow: hidden;
}
car.css
具体功能实现：
1. 当全选按钮改变时，让小复选框按钮和全选按钮保持一致。
全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额
$(".checkall").change(function() {
// 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
getSum(); // 计算总额函数
// 添加背景
// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
if($(this).prop("checked")) {
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
})
2. 当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。
通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块
$(".j-checkbox").change(function() {
if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
getSum();
// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
if($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
})
3. 用户可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化
①点击+按钮，文本框数字加一，小计加价。
先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计
$(".increment").click(function() {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 小计模块
// num为获取过来的单价，用substr()截取字符串把前边的￥去掉
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
②点击-按钮，文本框数字减一，小计减价。
具体方法同上，有一点不一样是商品数量不能小于1，要判断一下
$(".decrement").click(function() {
var n = $(this).siblings(".itxt").val();
n <= 1 ? n : n--;
$(this).siblings(".itxt").val(n);
// 小计模块
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
③直接修改文本框改变数量
$(".itxt").change(function() {
var n = $(this).val();
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
4. 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据
声明变量来存储已选商品数以及总额，用each()遍历已选商品。
function getSum() {
var count = 0;
var money = 0;
// 只遍历选中的商品 each遍历，i为索引，ele为对象
$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
count += parseInt($(ele).val()); // 会有小误差，要取整一下
})
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$(".price-sum em").text("￥" + money.toFixed(2));
}
5. 删除模块
// 删除单个商品
$(".p-action a").click(function() {
$(this).parents(".cart-item").remove();
getSum();
})
// 删除选中商品
$(".remove-batch").click(function() {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
})
// 清理购物车
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
完整JS代码：
$(function() {
$(".checkall").change(function() {
// 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
getSum(); // 计算总额函数
// 添加背景
// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
if($(this).prop("checked")) {
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
})
$(".j-checkbox").change(function() {
if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
getSum();
// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
if($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
})
// 点击+按钮，文本框数字加一
$(".increment").click(function() {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 小计模块
// num为获取过来的单价，用substr()截取字符串把前边的￥去掉
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
// 点击-按钮，文本框数字减一
$(".decrement").click(function() {
var n = $(this).siblings(".itxt").val();
n <= 1 ? n : n--;
$(this).siblings(".itxt").val(n);
// 小计模块
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
// 当用户直接修改文本框时
$(".itxt").change(function() {
var n = $(this).val();
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
// 计算总额函数
getSum();
function getSum() {
var count = 0;
var money = 0;
// 只遍历选中的商品 each遍历，i为索引，ele为对象
$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
count += parseInt($(ele).val()); // 会有小误差，要取整一下
})
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$(".price-sum em").text("￥" + money.toFixed(2));
}
// 删除商品模块
// 删除单个商品
$(".p-action a").click(function() {
$(this).parents(".cart-item").remove();
getSum();
})
// 删除选中商品
$(".remove-batch").click(function() {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
})
// 清理购物车
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
})
jQuery实现简单购物车页面的更多相关文章
- php+JQuery+Ajax简单实现页面异步刷新 （转）
页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8& ...
- FineUI小技巧（1）简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- JQuery调用iframe父页面元素与方法
JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...
随机推荐
- Gemini.Workflow 双子工作流高级教程：数据库设计及各表作用说明
整体数据库设计,可见这一篇:Gemini.Workflow 双子工作流高级教程:数据库-设计文档 这里对各数据表进行介绍: 工作流里的设计表并不多,核心只有以下8个: 下面按照流程的顺序来介绍一下表的 ...
- socket解决编码解码问题
MySocket类: import socket class MySocket(socket.socket): # 继承自socket文件中的socket类,此时socket就是父类 def __in ...
- CCNA 之 四 管理和配置CISCO设备
管理和配置CISCO设备 路由器组件 cpu 执行操作系统的指令 随机访问存储器RAM - RAM中内容断电丢失 - 运行操作系统: - 运行配置文件: - IP 路由表: - ARP 缓存; - 数 ...
- 【SSL1194】最优乘车
题面: 正文: 把每个边用链式前向星存起来,边权为\(1\),就可以愉♂快♂地最短路了
- Codeforces Round #451 (Div. 2) A B C D E
Codeforces Round #451 (Div. 2) A Rounding 题目链接: http://codeforces.com/contest/898/problem/A 思路: 小于等于 ...
- PyCharm 2019.3发布，增加了哪些新功能呢？
Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code.Sublime.NotePad.Python自带编辑器IDLE.J ...
- WPF最简单的分页控件
背景:最近在写项目的时候需要写一个简单的分页功能,因项目需要,没有改为MVVM模式,只需要在后台实现 1.呈现效果如下: 接下来就来上代码,看看怎么实现的 1.界面代码 <StackPanel ...
- javaWeb学习总结——文件上传、下载
目录 1.文件上传环境搭建 2.文件上传代码实现 3.关于下载 @ 嘿,熊dei,你不得不知道在Web开发中,文件上传和下载功能是非常常用的功能,关于文件上传,浏览器上传[文件以流的形式传输]--&g ...
- golang数据结构之循环链表
循环链表还是挺有难度的: 向链表中插入第一条数据的时候如何进行初始化. 删除循环链表中的数据时要考虑多种情况. 详情在代码中一一说明. 目录结构如下: circleLink.go package li ...
- luogu P2860 [USACO06JAN]冗余路径Redundant Paths |Tarjan
题目描述 In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numbered 1. ...