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添加静态方法,三 ...
随机推荐
- 【new File(String Path)加载资源问题】
2017-12-17 15:07:38 [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...
- Android中关于JNI 的学习（三）在JNI层訪问Java端对象
前面两篇文章简介了JNI层跟Java层的一些相应关系,包含方法名,数据类型和方法名称等,相信在理论层面.可以非常好地帮助我们去了解JNI在Native本地开发中的作用,对JNI的一些概念也有了一个初步 ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- mac brew install nginx遇到的坑
默认使用 brew install nginx 出现了一下的错误: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: ...
- 基于权限安全框架Shiro的登录验证功能实现
目前在企业级项目里做权限安全方面喜欢使用Apache开源的Shiro框架或者Spring框架的子框架Spring Security. Apache Shiro是一个强大且易用的Java安全框架,执行身 ...
- JAVA提高二十：CopyOnWriteArrayList&CopyOnWriteArraySet&ConcurrentHashMap介绍
前面我们将java集合类的大部分类都进行了深入分析,但我们会发现一个共性问题就是并发的问题,那么如何解决呢?我们前面基本都是通过Collections的一个工具类来进行的解决,但实际大部分使用中人们普 ...
- 《python参考手册(第四版)》【PDF】下载
<python参考手册(第四版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382222 内容介绍 本书是权威的Python语 ...
- 解决WebService/WCF调用时报错"服务器提交了协议冲突. Section=ResponseStatusLine"问题
今天更新了一个网站,新增了一个页面,调用WebService,在测试环境好好的,部署到正式环境后就莫名报错: 服务器提交了协议冲突. Section=ResponseStatusLine 网上查了好多 ...
- 如何在MQ中实现支持任意延迟的消息？
什么是定时消息和延迟消息? 定时消息:Producer 将消息发送到 MQ 服务端,但并不期望这条消息立马投递,而是推迟到在当前时间点之后的某一个时间投递到 Consumer 进行消费,该消息即定时消 ...
- Visual simultaneous localization and mapping: a survey 论文解析（全）
当激光或声纳等距离传感器被用来构建小的静态环境的二维地图时,SLAM的问题被认为是解决的.然而,对于动态,复杂和大规模的环境,使用视觉作为唯一的外部传感器,SLAM是一个活跃的研究领域. 第一部分是简 ...