jQuery实现简单的纯前端的购物车案例

实现简单的纯前端的购物车案例

首先，我们需要知道目前主流的购物车功能都需要哪些功能。比如某宝的购物车功能，包括商品展示、勾选功能、结算功能等等。由于是练习这里还加入了增加数据的功能。

简单的页面展示：

由于只是简单的实现功能，这里就没有过于炫丽的页面展示,下面就需要实现功能了。

第一步，我们先实现如何才能将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<list.length;i++){if(list[i].name==inputstr){list2.push(list[i]);}}list1=list2;list2=[];$("table").children("tbody").children("tr").remove();init(list1);}if(optiontext!="请选择")  //判断下拉框的值{for(var i=0;i<list1.length;i++){if(list1[i].country==optiontext){list2.push(list1[i]);}}list1=list2;$("table").children("tbody").children("tr").remove();init(list1);}if(inputstr==""&&optiontext=="请选择"){$("table").children("tbody").children("tr").remove();init(list);}
}

这里的检索思想有很多，但只要是能够实现正确结果就可以了，但真正的大牛写的代码是非常简洁的，需要的是思维的成熟。

第三步，我们需要实现购物车的金额结算，总计功能和删除功能

这里需要注意的是，一开始就简单的实现金额结算和总计功能的时候，出现了执行完检索后，金额结算和总计功能失效的问题，经检查，是因为检索之后，将之前的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=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= 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();}
})

里面的()和()函数：

//合计函数
function getSum()
{var list=$(".check:checked");var allprice=0;for(var i=0;i<list.length;i++){allprice+=parseInt(list[i].parentElement.parentElement.children[6].innerText);}$("#heji").text("合计："+allprice);
}
//全选判断函数
function quanxuan(){if($(".check:checked").length== $(".check").length){$("#cbxAll").prop("checked",true);}else{$("#cbxAll").prop("checked",false);}}

第四步，实现添加功能

需要注意的是，正常的购物车页面也是没有添加功能的，这里也是为了练习对的熟练掌握。

这里我们的实现思路是点击添加按钮，跳页到一个新的窗口。这里我们需要知道.open()方法。详情请见 open() 方法，也就是父子页面进行数据的交换。

// An highlighted block
<script>$(function(){$("#btn").click(function(){var name=$("#name").val();var pinpai=$("#pinpai").val();var chandi=$("#chandi").val();var price=$("#price").val();var list1={name:name,brand:pinpai,country:chandi,price:price};window.opener.list.push(list1);// console.log( window.opener.list);window.opener.$("table").children("tbody").children("tr").remove();window.opener.init( window.opener.list);window.opener.$("select").children("option").remove();window.opener.addselect();window.close();});})</script>

全部代码：

主页面index.js代码：

$(function(){addselect();//动态给select添加option$("select").change(function(){optiontext=$(this).val();});
$("#heji").text("合计：0");//默认为0
//添加行init(list);//查询$("#chaxun").click(function(){chaxun();})//事件委托，解决检索后事件失效
$("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=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= 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();}
})$("#btnAdd").click(function(){window.open("add.html","name","height=300, width=300, top=200,left=700, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")});});//合计函数
function getSum()
{var list=$(".check:checked");var allprice=0;for(var i=0;i<list.length;i++){allprice+=parseInt(list[i].parentElement.parentElement.children[6].innerText);}$("#heji").text("合计："+allprice);
}//全选判断函数
function quanxuan(){if($(".check:checked").length== $(".check").length){$("#cbxAll").prop("checked",true);}else{$("#cbxAll").prop("checked",false);}}//查询函数
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<list.length;i++){if(list[i].name==inputstr){list2.push(list[i]);}}list1=list2;list2=[];$("table").children("tbody").children("tr").remove();init(list1);}if(optiontext!="请选择"){for(var i=0;i<list1.length;i++){if(list1[i].country==optiontext){list2.push(list1[i]);}}list1=list2;$("table").children("tbody").children("tr").remove();init(list1);}if(inputstr==""&&optiontext=="请选择"){$("table").children("tbody").children("tr").remove();init(list);}
}
//添加行函数
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);}//select添加option函数function addselect(){var arr=[];for(var i=0;i<list.length;i++){arr.push(list[i].country);}var new_arr=[];for(var i=0;i<arr.length;i++) {var items=arr[i];//判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后if($.inArray(items,new_arr)==-1) {new_arr.push(items);}}$("select").append("请选择");for(var i=0;i<new_arr.length;i++){$("select").append(""+new_arr[i]+"");}}var optiontext="请选择";var list = [{name: "奥托",brand: "铃木",country: "中国",price: "20000"}, {name: "奥托",brand: "铃木",country: "美国",price: "20000"}, {name: "奥托",brand: "铃木",country: "德国",price: "20000"}, {name: "奥托",brand: "铃木",country: "中国",price: "20000"}, {name: "奥托",brand: "铃木",country: "中国",price: "20000"}, {name: "奥托",brand: "铃木",country: "中国",price: "20000"}, {name: "奥托",brand: "铃木",country: "美国",price: "20000"}, {name: "奥托",brand: "铃木",country: "德国",price: "20000"}, {name: "奥托",brand: "铃木",country: "中国",price: "20000"}, {name: "奥托",brand: "铃木",country: "法国",price: "20000"},];

主页面index.html代码：

车型：   国家：    
名称
品牌
产地
价格
数量
合计
操作

子页面代码：

<script>$(function(){$("#btn").click(function(){var name=$("#name").val();var pinpai=$("#pinpai").val();var chandi=$("#chandi").val();var price=$("#price").val();var list1={name:name,brand:pinpai,country:chandi,price:price};window.opener.list.push(list1);// console.log( window.opener.list);window.opener.$("table").children("tbody").children("tr").remove();window.opener.init( window.opener.list);window.opener.$("select").children("option").remove();window.opener.addselect();// window.close();});})</script>
</head>
<body><p>名称：<input type="text"  id="name"/></p><p>品牌：<input type="text"  id="pinpai"/></p><p>产地：<input type="text"  id="chandi"/></p><p>价格：<input type="text"  id="price"/></p><p><input type="button" value="提交" id="btn" /></p>
</body>

乾坤未定，你我皆是黑马！！！

相信你将来也会成为一位大牛