jquery实现购物车基本功能


Posted in jQuery onOctober 25, 2019

购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作,其实现过程如下所示:

1.html代码:

<body>
 <div class="empty">
 购物车空空如也,<a href="javascript:void(0);" >快去选购吧</a>
 </div>
 <table border="2px solid #ccc" id="table">
 <thead>
 <th>
 <input type="checkbox" class="checkOnly" style="vertical-align:middle;margin-right:20px;">全选
 </th>
 <th>序号</th>
 <th>商品名称</th>
 <th>数量</th>
 <th>单价</th>
 <th>小计</th>
 <th>操作</th>
 </thead>
 <tbody>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">1</td>
 <td>烤煎饼</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">2</span>
 </td>
 <td>
 小计:
 <span class="prices">2</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">2</td>
 <td>珍珠奶茶</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">4</span>
 </td>
 <td>
 小计:
 <span class="prices">4</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">3</td>
 <td>水煮鱼</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">20</span>
 </td>
 <td>
 小计:
 <span class="prices">20</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">4</td>
 <td>蛋糕</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">50</span>
 </td>
 <td>
 小计:
 <span class="prices">50</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">5</td>
 <td>土豆片</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">5</span>
 </td>
 <td>
 小计:
 <span class="prices">5</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">6</td>
 <td>蛋黄派</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价:
 <span class="price">5.5</span>
 </td>
 <td>
 小计:
 <span class="prices">5.5</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td colspan="7" class="talast">
 <span>商品一共
 <span class="goods_num" style="color:red;font-size:20px;">0</span> 件; 共计花费
 <span class="pricetal" style="color:red;font-size:20px;">0</span> 元; 其中最贵的商品单价是
 <span class="pricest" style="color:red;font-size:20px;">0</span> 元</span>
 </td>
 </tr>
 </tbody>
 </table>
</body>

2.css代码:

<style type="text/css">
 table {
 width: 1000px;
 /* height: 300px; */
 border-collapse: collapse;
 table-layout: fixed;
 text-align: center;
 font-size: 18px;
 margin: 0 auto;
 }

 a {
 text-decoration: none;
 color: black;
 }

 tr {
 height: 50px;
 }

 .check {
 width: 20px;
 height: 20px;
 }

 .checkOnly {
 width: 20px;
 height: 20px;
 }

 .empty {
 font-size: 25px;
 position: fixed;
 top: 45%;
 left: 45%;
 display: none;
 }

 .empty a {
 color: pink;
 }

 .empty a:hover {
 text-decoration: underline;
 }
 </style>

3.js代码:

<script src="js/jquery-1.8.3.min.js"></script> //引入jquery
<script src="js/Allcheck.js"></script> //引入封装好的全选反选插件
<script>
 $(function () {
 $(".adds").each(function () { //点击增加的按钮
 $(this).click(function () {
 //1.改变数量 
 var count = parseFloat($(this).parents("tr").find(".span").html());
 count++;
 $(this).parent("span").find(".span").html(count);
 //2.改小计(先找到单价与数量,再相乘,最后放在小计(“.prices”)里)
 var price = parseFloat($(this).parents("tr").find(".price").html());
 var money = (price * count);
 $(this).parents("tr").find(".prices").html(money);
 //3.改总价
 total();
 countAll();//最后的总数量
 compare();//选中复选框时比较商品单价中最高的
 });
 });
 $(".reduces").each(function () {//点击减少的按钮
 $(this).click(function () {
 //1.改变数量 
 var count = parseFloat($(this).parents("tr").find(".span").html());
 count--;
 if (count < 1) { //当数量减到1时不能再减
 return;
 }
 $(this).parent("span").find(".span").html(count);
 //2.改小计
 var price = parseFloat($(this).parents("tr").find(".price").html());
 var money = (price * count);
 $(this).parents("tr").find(".prices").html(money);
 total();
 countAll();//最后的总数量
 compare();//选中复选框时比较商品单价中最高的
 });
 });
 //删除
 $(".del").each(function () {
 $(this).click(function () {
 let re = $(this).parents("tr"); //找到要删除的行
 if (confirm("你确定删除吗?")) {
 re.remove();
 }
 total();
 countAll(); //总数量
 compare(); //最贵的
 //删除后重新排序号
 for (let i = 0; i < $(".num").length; i++) {
 $(".num")[i].innerHTML = i + 1;
 }
 //全都删除时清空table(通过获取tbody的高度来判断)
 let clear = $("tbody").height();
 if (clear == 50) {
 $("table").remove();
 $(".empty").css({ //删完时显示"购物车为空"这个盒子
 display: "block"
 });
 }
 });
 });
 //合计
 function total() {
 let sum = 0;
 $(".prices").each(function () {//先循环每个小计
 if (($(this).parents("tr").find(".check")).prop("checked")) {//判断复选框有没有选中
 sum += parseFloat($(this).html());
 }
 $(".pricetal").html(sum);
 });
 }
 //总数量
 function countAll() {
 let counts = 0;
 for(let i=0;i<$(".check").length;i++){
 if($(".check")[i].checked==true){ //注意此块用jquery不好实现
 counts+=parseInt( $('.span')[i].innerHTML);
 }
 } 
 $(".goods_num")[0].innerHTML=counts;
 }
 //最贵商品比较
 function compare() {
 let temp = 0;
 for (let i = 0; i < $(".price").length; i++) { //循环单价
 if($(".check")[i].checked==true){
 var temps = parseFloat($(".price")[i].innerHTML);
 if (temps > temp) {
 temp = temps;
 }
 }
 };
 $(".pricest").html(temp);
 }
 //全选插件(引入插件Allcheck.js)
 $(".checkOnly").bindCheck($("#table :checkbox"));
 //当点击复选框时调用total()
 $(".check").each(function (){
 $(this).click(function () {
 let num = 0;
 $(".check").each(function () {
 if ($(this).prop("checked")) {
 num++; 
 }
 countAll(); 
 total();
 compare(); //最贵的
 });
 if(num == $(".check").length){//如果复选框的长度与num相等时,全选那个按钮也会被选中
 $(".checkOnly")[0].checked = true;
 compare(); //最贵的
 countAll(); //总数量
 total();
 }else{
 $(".checkOnly")[0].checked = false;
 }
 });
 });
 $(".checkOnly").click(function () {
 total();
 countAll(); //总数量
 compare(); //最贵的
 });
 });
</script>

补充上面js代码中用到的全选反选插件 \color{red}{补充上面js代码中用到的全选反选插件}补充上面js代码中用到的全选反选插件

//1、定义全选的插件
jQuery.fn.extend({
 bindCheck:function($subCheckBox,$btnUncheck){
 let $allCheckBox = this;
 //1、给全选复选框绑定click事件
 //this:是全选复选框(jQuery对象)
 this.click(function(){
 let isChecked = this.checked;
 $subCheckBox.each(function(){
 this.checked = isChecked;
 });
 });
 //2、给反选
 if(arguments.length==2){
 $btnUncheck.click(function(){
 $subCheckBox.each(function(){
 this.checked = !this.checked;
 });
 reversCheck();
 });
 }
 //3、给每个选择项的复选框绑定事件
 $subCheckBox.click(function(){
 reversCheck();
 });
 function reversCheck(){
 //1、判断是否全部的复选框被选中
 let isAllChecked = true;
 $subCheckBox.each(function(){
 if(!this.checked){
 isAllChecked = false;
 }
 });
 //2、处理全选复选框
 $allCheckBox.attr("checked",isAllChecked);
 }
 }
});

效果如下图所示:

jquery实现购物车基本功能

以上就是一个功能比较完整的购物车,有问题或者建议欢迎指出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
You might like
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
农历与西历对照
2006/09/06 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python函数和模块的使用总结
2019/05/20 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python实现在一个画布上画多个子图
2020/01/19 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
销售实习自我鉴定
2013/12/07 职场文书
营业员岗位职责
2015/02/11 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书