实现简单的纯前端的购物车案例
首先 ， 我们需要知道目前主流的购物车功能都需要哪些功能 。比如某宝的购物车功能 ， 包括商品展示、勾选功能、结算功能等等 。由于是练习这里还加入了增加数据的功能 。
简单的页面展示：
由于只是简单的实现功能 ， 这里就没有过于炫丽的页面展示,下面就需要实现功能了 。
第一步 ， 我们先实现如何才能将list里的数据绑定到tbody里
//添加行函数function init(list) {var tb= $("table").children("tbody");var str;for(var i=0;i<=list.length;i++){if(i>=list.length){tb.append("");}else{str+=`${list[i].name}${list[i].brand}${list[i].country}${list[i].price}0删除`;}}tb.append(str);}
这里这个添加行函数实现了为tbody里动态添加tr ， 这里的参数是一个数据数组 。需要注意的是 ， 这里由于拼接字符串过于长会引起代码维护困难 ， 这里使用的是ES6语法中的模板字符串拼接 ， 详情请查阅ES6中的字符串(原作者：见嘉于世)
第二步 ， 简单实现检索功能
这里需要说明的是 ， 正常的购物车是没有检索功能的 ， 但由于这个案例比较适合刚学完的新手练习 ， 这里我们加入检索功能 。
文章插图
//检索查询函数function chaxun(){var list1=list;var list2=[];$("table").children("tbody").children("tr").remove();var inputstr=$("#car_name").val();//list=所有的数据if(inputstr!="")//判断输入框的值{for(var i=0;i
这里的检索思想有很多 ， 但只要是能够实现正确结果就可以了 ， 但真正的大牛写的代码是非常简洁的 ， 需要的是思维的成熟 。
第三步 ， 我们需要实现购物车的金额结算 ， 总计功能和删除功能
这里需要注意的是 ， 一开始就简单的实现金额结算和总计功能的时候 ， 出现了执行完检索后 ， 金额结算和总计功能失效的问题 ， 经检查 ， 是因为检索之后 ， 将之前的tbody里的数据清除后又重新动态绑定数据后 ， 之前的功能绑定失效 ， 这里我们需要使用事件委派来解决该问题 。详情请查看——事件委派之详解(作者: 一只野生饭卡丘) ， 所以我们这里就使用事件委派写 ， 也包括了删除功能 。
//事件委托 ， 解决检索后事件失效$("table").on('click',function(event){if(event.target.className=="sub"){var price=event.target.parentElement.previousElementSibling.innerText;var num=event.target.nextElementSibling.value-1;if(num<=0){event.target.parentElement.nextElementSibling.innerText=0;event.target.nextElementSibling.value=http://www.kingceram.com/post/0;getSum();}else{event.target.nextElementSibling.value=num;num--;event.target.parentElement.nextElementSibling.innerText=(num+1)*price;getSum();}}if(event.target.className=="add"){var price=event.target.parentElement.previousElementSibling.innerText;var num=parseInt( event.target.previousElementSibling.value) ;event.target.previousElementSibling.value= http://www.kingceram.com/post/num+1 ;event.target.parentElement.nextElementSibling.innerText=(num+1)*price;getSum()}if(event.target.className=="check"){getSum()}if(event.target.className=="checkall"){if($("#cbxAll").prop("checked")==true){$(".check").prop("checked",true);getSum();}else{$(".check").prop("checked",false);getSum();}}if(event.target.className=="del"){event.target.parentElement.parentElement.remove();getSum();}quanxuan();})$("table").on("focusout",function(event){if(event.target.className=="input_num"){var price=event.target.parentElement.previousElementSibling.innerText;var num=event.target.value;event.target.parentElement.nextElementSibling.innerText=price*num;getSum();}})
- 【C/C++ 数据结构 】广义表深度解析：从原理到C/C++实现
- 产业探秘：基于大模型实现医学文本信息处理与抽取
- C语言实现检测Linux设备网络状态
- 《JavaScript AST其实很简单》二、Step1-函数调用还原
- Nant使用简介
- oracleb树索引原理,简单说说B+树索引的结构和原理
- 每日一题 pwnable.kr flag
- 解释原理简单易懂 进制转换详解
- 如何实现商品规格参数查询代码（通过三级类目的cid查找数据表里全部对应cid的信
- 工厂人员定位系统是如何实现数字化安全生产管理的？