首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

曾阿牛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
Bootstrap源码解读表单（2）
Dec 22 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
vue模式history下在iis中配置流程
Apr 17 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
javascript实现移动端轮播图
Dec 09 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
bs4(1) 数组(5) decorator(1) 装饰器(1) 数据保存(1) 读取(1) 网页解析(1) 矩阵(1) translation(2) 查找算法(1)
You might like
PHP中文汉字验证码
2007/04/08 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
微信小程序开发（三）：返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Django models filter筛选条件详解
2020/03/16 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python文件读取失败怎么处理
2020/06/23 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
美国最大的袜子制造商和零售商：Renfro Socks
2017/09/03 全球购物
Timberland澳大利亚官网：全球领先的户外品牌
2019/12/10 全球购物
什么是虚拟内存？虚拟内存有什么优势？
2012/02/19 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
竞职演讲稿范文
2014/01/11 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
初中数学教学随笔
2015/08/15 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers