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中的deferred对象和extend方法详解
May 08 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
如何基于jQuery实现五角星评分
Sep 02 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP生成随机密码类分享
2014/06/25 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
应聘教师推荐信
2013/10/31 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
人事经理岗位职责
2014/04/28 职场文书
给校长的建议书100字
2014/05/16 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
python百行代码实现汉服圈图片爬取
2021/11/23 Python