jquery实现手机端单店铺购物车结算删除功能


Posted in Javascript onFebruary 22, 2017

手机端一部分用flex布局写在这里看着不爽把css全部删除了。只留下js结算功能js很臃肿,请留下宝贵意见提升性能。改天上多店铺购物车手机端原版截图

效果图:

jquery实现手机端单店铺购物车结算删除功能

图(1)全部勾选的效果

jquery实现手机端单店铺购物车结算删除功能

图(2)勾选,点击“删除”效果

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <title>购物车</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 <!----确保适当的绘制和触屏缩放,让网页的宽度自动适应手机屏幕的宽度---->
 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
 <!----关键词搜索---->
 <meta name="keywords" content="">
 <!----描述网页的核心内容,通常为网页内容的摘要信息---->
 <meta name="description" content="" />
 <meta name="format-detection" content="telephone=no" />
 <meta name="format-detection" content="email=no" />
 <link rel="stylesheet" href="css/basic.css" rel="external nofollow" >
 <link rel="stylesheet" href="css/css.css" rel="external nofollow" >
</head>
<style>
.flex-center{
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -o-box;
 display: box;
 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -o-box-pack: center;
 box-pack: center;
 -webkit-box-align: center;
 -moz-box-align: center;
 -ms-flex-align: center;
 -o-box-align: center;
 box-align: center;
}
.kong{
 font-size: 0.3rem;
 height: 80vh;
 color: #333333;
}
.kong a {
 color: #333333;
 text-decoration: double;
}
</style>
<body>
<main class="dfk_main">
 <dl class="gwc_dl">
 <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt>
 <dd class="gwc_dd2">零食
 <span>¥<span class="gwc_dd_p">1.00</span></span>
 <span class="spjj gwc_jj">
 <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+">
 </span></dd>
 </dl>
 <dl class="gwc_dl">
 <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt>
 <dd class="gwc_dd2">零食
 <span>¥<span class="gwc_dd_p">1.00</span></span>
 <span class="spjj gwc_jj">
 <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+">
 </span></dd>
 </dl>
 <section class="gwc_delectbtn">
 <button type="button" class="delete">删除</button><p>共 <span class="colb51 gwc_sl">0</span> 件商品     共计:¥<span class="ShopTotal">0.00</span></p>
 </section>
</main>
 <footer class="gwc_footer">
 <form action="#" method="get">
 <p class="gwc_qx"><label class="gwc_1 gwc_label"><input type="checkbox" class="gwc_qx2 ShopCheck" value=""></label><span>全选</span>
 <span class="gwc_jsp"><span >合计:¥<b class="ShopTotal">0.00</b></span><span>不含邮费</span></span>
 <button type="button" class="gwc_btnjs">结算(<span class="gwc_sl">0</span>)</button>
 </p>
 </form>
 </footer>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
 $(function(){
 $(".shuliang").keyup(function() {
 if (isNaN($(this).val()) || parseInt($(this).val()) < 1 || $(this).val()=="") {
 $(this).val("1");
 }
 });
 // 数量加
 $(".jia").click(function(){
 var t = $(this).parent().find(".shuliang");
 t.val(parseInt(t.val())+1);
 var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量
 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价
 var tot = p * n; //计算单个商品的总价
 TotalPrice();
 });
 // 数量减
 $(".jian").click(function(){
 var t = $(this).parent().find(".shuliang");
 if (parseInt(t.val())>1) {
 t.val(parseInt(t.val())-1);
 }
 var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量
 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价
 var tot = p * n; //计算单个商品的总价
 TotalPrice();
 });
 // 点击商品按钮
 $(".GoodsCheck").change(function() {
 $(this).parent().toggleClass('gwc_active')
 var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品
 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品
 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮
 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
 Shops.prop('checked', true).parent(".gwc_label").addClass("gwc_active"); //店铺全选按钮被选中
 TotalPrice();
 } else { //如果选中的商品不等于所有商品
 Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中
 // 计算
 TotalPrice();
 }
 });
 // 点击店铺
 $(".ShopCheck").change(function() {
 if ($(this).prop("checked") == true) { //如果全选按钮被选中
 $(".gwc_label").addClass("gwc_active");
 $(".GoodsCheck").prop('checked', true).parent(".gwc_1").addClass("gwc_active"); //所有按钮都被选中
 // 计算
 TotalPrice()
 } else {
 $(".gwc_label").removeClass("gwc_active");
 $(".GoodsCheck").prop('checked', false).parent(".gwc_1").removeClass("gwc_active"); //else所有按钮不全选
 // 计算
 TotalPrice();
 }
 });
//删除
 $('.delete').click(function () {
 $(".dfk_main input[type='checkbox']:checked").each(function() { // 遍历选中的checkbox
 var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品
 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品
 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮
 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
 $('.dfk_main').html('<a href="#" rel="external nofollow" >购物车为空<br>点击去购买</a>').addClass('flex-center kong');
 Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中
 $('.gwc_sl,.ShopTotal').text(0.00);
 TotalPrice();
 } else { //如果选中的商品不等于所有商品
 var n = $(this).parents('.gwc_dl').index(); // 获取checkbox所在行的顺序
 $(".dfk_main").find(".gwc_dl:eq("+n+")").remove();
 TotalPrice();
 }
 });
 });
 function TotalPrice() {
 var oprice = 0; //店铺总价
 var sl = 0;//数量
 $(".dfk_main .gwc_dl .GoodsCheck").each(function () { //循环店铺里面的商品
 if ($(this).is(":checked")) { //如果该商品被选中
 var num = parseInt($(this).parents(".gwc_dl").find(".shuliang").val()); //得到商品的数量
 // alert(num);
 var price = parseFloat($(this).parents(".gwc_dl").find(".gwc_dd_p").text()); //得到商品的单价
 var total = price * num; //计算单个商品的总价
 oprice += parseFloat(total); //计算该店铺的总价
 sl += parseInt(num);
 }
 $('.gwc_sl').text(sl);
 $(".ShopTotal").text(oprice.toFixed(2)); //输出全部总价
 });
 }
});
 // document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
js打造数组转json函数
Jan 14 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
vue中template的三种写法示例
Oct 21 Javascript
js实现简易垂直滚动条
Feb 22 #Javascript
微信小程序 引用其他js文件实现代码
Feb 22 #Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 #Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 #Javascript
JS实现一个简单的日历
Feb 22 #Javascript
js实现日历与定时器
Feb 22 #Javascript
JS验证字符串功能
Feb 22 #Javascript
You might like
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php中require和require_once的区别说明
2014/02/27 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
img的onload的另类用法
2008/01/10 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Python实现的计算马氏距离算法示例
2018/04/03 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
什么是唯一索引
2015/07/05 面试题
三下乡活动方案
2014/01/31 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2019入党申请书格式
2019/06/25 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书