JQuery编写简易京东购物车功能
前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复 习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的 ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html里面，所以最好还是js文件独立出来，这样代码简洁，处理起来方便，好了废话不多说，上代码！
///js部分
<script type="text/javascript">
$(function () {
//绑定加号
$(".plus").click(function () {
var num = parseInt($(this).siblings(".num").text());//定义一个变量存储数字的增加
$(this).siblings(".num").text(num + 1);//数字加
calPrice()
})
//绑定减号
$(".minus").click(function () {
var num = parseInt($(this).siblings(".num").text())
if (num == 1) return;
$(this).siblings(".num").text(num - 1);
calPrice()
})
//这个函数的意思就是说在增减函数上加一个点击事件，点击事件里面新建一个变量来存储增减的数字，
//利用同级节点siblings来找到显示的框，然后找到后直接增减。
//单个店铺全选功能
$(".shop-name input[type=checkbox]").click(function () {
//找单个店铺单选后，应该继续加事件，当选中店铺总单选框后应该所有的店铺的单选框都被选中
//此处应该先找他们共同的父亲然后再去找店铺里面用ul装着的单选框,然后进行判断，判断复选框是否被选中
if ($(this).prop("checked")) {
$(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked", true);
}
else {
$(this).parents(".shop-group-item").find("ul li input[type=checkbox]").prop("checked",false);
}
checkAllGod()
calPrice()
});
//选中第一个影响到第二个店铺了
//单个复选框事件
$(".shop-info input[type=checkbox]").click(function () {
//需求：当单个店铺内的所有复选框被选中则将店铺全选框选中，取消一个则取消店铺全选框的全选
//需要获取选中的店铺的个数，需要获得没有选中店铺的个数，两个数量相等时则选中店铺复选框
var goodNum = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]").length;
var goodSelect = $(this).parents(".shop-group-item").find("ul li input[type=checkbox]:checked").length;
if (goodNum == goodSelect) {
$(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", true);
}
else {
$(this).parents(".shop-group-item").find(".shop-name input[type=checkbox]").prop("checked", false);
}
checkAllGod()
calPrice()
});
//店铺总全选功能
//需求：要求选中购物车全选按钮时所有的复选框全部都被选中，否则购物车全选按钮取消选中
//建立一个判断函数，判断全选按钮的状态
function checkAllGod() {
var AllNum = $(".shop-group-item").length;
var AllSelect = $(".shop-group-item .shop-name input[type=checkbox]:checked").length;
if (AllNum ==AllSelect) {
$("#AllCheck").prop("checked", true);
}
else {
$("#AllCheck").prop("checked", false);
}
}//这个函数用来判断每一个店铺的复选框是否被选中从而选中最大的复选框
//总店铺全选功能
$("#AllCheck").click(function () {
if ($(this).prop("checked")) {
$(".shop-group-item input[type=checkbox]").prop("checked", true);
}
else {
$(".shop-group-item input[type=checkbox]").prop("checked", false);
}
});
//结算函数
function calPrice() {
//遍历商店
//定义购物车总价变量
var totaPrice = 0;
$(".shop-group-item").each(function () {
//定义本店总计变量
var Shopprice = 0;
//开始遍历店铺内有多少商品
$(this).find("ul li input[type=checkbox]:checked").each(function () {
//建立商品单价变量 找到商品单价并做好类型转换赋值给变量
var shoppingrice = parseFloat($(this).siblings(".shop-info-text").find(".price").text());
//建立商品数量变量，找打数量并做好类型转换赋值给变量
var num = parseInt($(this).siblings(".shop-info-text").find(".num").text());
//店铺总计等于数量乘以单价,循环加
Shopprice += (shoppingrice * num);
});
//找到店铺总计显示出将金额赋值,并做好类型转换 toFixed()
$(this).find(".shopPrice span ").text(Shopprice.toFixed(2));
//计算购物车商品总价
totaPrice += Shopprice;
});
//将商品总价赋值
$("#AllTotal").text(totaPrice);
}
//删除函数
$(".coupons a").click(function () {
$(".jd_win").show();
$shop = $(this).parents(".shop-group-item");
});
//删除确认事件
$(".submit").click(function () {
//判断有哪些商品的的按钮被选中了，选中了调用remove方法
//如果选中的是店铺按钮，则删除整个店铺
if ($shop.find("div>input[type=checkbox]").prop("checked")) {
$shop.remove();
}
else {
//否则一列一列的删除
$shop.find("ul li input[type=checkbox]:checked").parents("li").remove();
}
$(".jd_win").hide();
calPrice();
});
//删除取消事件
$(".cancle").click(function () {
$(".jd_win").hide();
});
});
</script>
///js部分
///html部分
<!--头部开始-->
<div class="header">
<h1>购物车</h1>
<a href="#" class="back"><span></span></a>
<a href="#" class=""></a>
</div>
<!--头部结束-->
<div class="shopping">
<div class="shop-group-item">
<div class="shop-name">
<input type="checkbox" class="check goods-check shopCheck">
<h4><a href="#">苹果专卖店</a></h4>
<div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
</div>
<ul>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li><div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
</div>
<div class="shop-group-item">
<div class="shop-name">
<input type="checkbox" class="check goods-check shopCheck">
<h4><a href="#">苹果专卖店</a></h4>
<div
class="coupons"><span>领券</span><em>|</em><
span>编辑</span><em>|</em><span><a
href="#">删除</a></span></div>
</div>
<ul>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img"><a
href="#"><img src="data:images/computer.jpg"
/></a></div>
<div class="shop-info-text">
<h4>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</h4>
<div
class="shop-brief"><span>重量:3.3kg</span><span>颜色:标配
版</span><span>版本:13.3英寸</span></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">100.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="minus">-</a>
<span class="num" >1</span>
<a href="javascript:;" class="plus">+</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
</div>
</div>
<div class="payment-bar">
<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
<div class="shop-total">
<strong>总价：<i class="total" id="AllTotal">0.00</i></strong>
<span>减免：123.00</span>
</div>
<a href="#" class="settlement">结算</a>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<!--以下是遮罩层-->
<div class="jd_win">
<div class="jd_win_box">
<div class="jd_win_tit">你确定删除这些商品吗？</div>
<div class="jd_btn clearfix">
<a href="#" class="cancle f_left">取消</a>
<a href="#" class="submit f_right">确定</a>
</div>
</div>
</div>
<!--遮罩层结束-->
///html部分
JQuery编写简易京东购物车功能的更多相关文章
- 使用jQuery制作一个简易的购物车结算流程
因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...
- jQuery 复制节点的元素实现加入到购物车功能
描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...
- jQuery 复制节点的元素实现添加到购物车功能
描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...
- 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 编写Java程序，应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能
查看本章节 查看作业目录 需求说明: 应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能 实现思路: 创建 Java 项目,在项目中创建服务端类 ChatServerThre ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈：jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- jquery ZeroClipboard实现黏贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- jquery编写插件
jquery编写插件的方法 版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...
随机推荐
- Java后台实现方法
Java后台实现方法 首先后台结构分为四个部分(以表schedule为例) entity>mapper>service>controller 1. 在entity里面写好实体,新建目 ...
- 自己定义View Controller转换动画
原文链接 : Introduction to Custom View Controller Transitions and Animations 原文作者 : joyce echessa 译文出自 : ...
- 前端（各种demo）三：优惠券，热区，等模块的实现（css方式）
各种样式的css实现 1.优惠券样式的实现: 2.热区的实现: 在电商平台上总会发出各种券,需要对应到不同的产品,对应到不同的服务.而使用券可以使用UED的设计稿里的照片,但是本来一次性的加载过多 ...
- 面向矩阵的numpy入门笔记
我先声明我学numpy的目的:在python中使用矩阵(我需要在机器学习中使用矩阵),所以我的目的很明确,矩阵: 矩阵在numpy中叫ndarray(The N-dimensional array), ...
- Spring Boot-------JPA基础及查询规则
JPA基础及查询规则 JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数 ...
- websocket简介
在我们做web项目的过程中,经常需要做的一个模块是消息模块.典型的场景:一个商城系统的后台管理,我想实现如果前台有客户下单,后台就会接到消息,以便尽快发货处理. 要实现上述的功能,我们有几种备选的方案 ...
- 自学WPF之Binding（二）
没有Source的Binding,使用ContentText作为Binding源: 上一篇是把CLR类型对象当作指定为Binding的Source,两种方法:一是把对象赋值给Binding.Sourc ...
- IDEA使用--字体、编码和基本设置
IDEA这么高端的工具之前只是断断续续使用了一下,因为项目的开发都是在eclipse上,每次学习IDEA的使用都得上网搜索半天,今天自己整理一下,方便以后查阅. IDEA版本15.0.4 字体 界面字 ...
- Struts的使用
一.Struts2的获取 Struts的官方网站为:http://struts.apache.org/ 下载完Struts2的jar包,解压,Struts2资源包的目录结构如下图: apps目录下包含 ...
- CentOS中安装配置Nginx
一.安装Nginx '首先我们需要在nginx官网中下载nginx安装包,在这就下载最新版 nginx-1.13.7版本 下载完成以后我们进入下载页面进行查看 下载文件目录为 home/userNam ...