首页
所有分类
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 相关文章推荐
javascript第一课
Feb 27 Javascript
深入理解JavaScript系列（16） 闭包（Closures）
Apr 12 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery插件实现文件上传功能（支持拖拽）
Aug 27 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
实用文书(952) 申请书(21) 观后感(479) 导游词(322) 通知(159) 开幕词(63) 计划(88) 慰问信(53) 闭幕词(9) 汇报材料(247)
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
php post换行的方法
2020/02/03 PHP
javascript实现的listview效果
2007/04/28 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
美国旅游网站：Tours4Fun
2017/02/17 全球购物
寒暑假实习证明书模板
2014/11/29 职场文书
委托书格式要求
2015/01/28 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
烈士陵园观后感
2015/06/08 职场文书
人民的好儿女观后感
2015/06/18 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js