首页
所有分类
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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
Vue数据绑定简析小结
May 07 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
JS实现拖动模糊框特效
Aug 25 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
虚拟键盘(1) xhunter1.sys(1) 鸿蒙3.0(1) HarmonyOS(1) 蓝牙(1) 蓝牙耳机(1) Debian(1) RustDesk(1) 鸿蒙(2) 华为(1)
You might like
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Django与JS交互的示例代码
2017/08/23 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
意大利网上药房：Farmacia 33
2020/01/27 全球购物
农救科工作职责
2013/11/27 职场文书
初中科学教学反思
2014/01/21 职场文书
项目转让协议书
2014/10/27 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
五年级语文教学反思
2016/03/03 职场文书
深入理解python协程
2021/06/15 Python