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 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS实现留言板功能
Jun 17 Javascript
axios post提交formdata的实例
Mar 16 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
原生JS实现相邻月份日历
Oct 13 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使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
javascript 播放器 控制
2007/01/22 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
javascript操作数组详解
2014/12/17 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python操作redis的方法
2015/07/07 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python实现的汉诺塔算法示例
2019/10/23 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
师德模范事迹材料
2014/06/03 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
如何写好开幕词?
2019/06/24 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
python实现黄金分割法的示例代码
2021/04/28 Python
golang DNS服务器的简单实现操作
2021/04/30 Golang
浅谈Python 中的复数问题
2021/05/19 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js