php购物车选择器,JavaScript开发购物车之购物车功能实现

上一节对购物车页面进行了相关的设计

本节通过JavaScript代码实现购物车各项功能。

思路：

第一步：当页面加载完后，根据本地的数据，动态生成表格(购物车列表)

获取所要操作的节点对象

判断购物车中是否有数据？

有：显示出购物列表

没有：提示购物车为空

第二步：当购物车列表动态生成后，获取tbody里所有 的checkeBox标签节点对象，看那个被选中就获取对应行小计进行总价格运算。

第三步：为每一个checkbox添加一个onchange事件，根据操作更改总价格

第四步：全选

第五步：为加减按钮添加一个鼠标点击事件，更改该商品的数量

第六步：删除

获取所有的删除按钮

为删除按钮添加一个鼠标点击事件

删除当前行，并更新本地数据

var listObj = getAllData();

var table = document.getElementById("table")

var box = document.getElementById("box")

var tbody = document.getElementById("tbody");

var totalPrice = document.getElementById("totalPrice");

var allCheck = document.getElementById("allCheck");

if(listObj.length == 0) { //购物车为空

box.className = "box";

table.className = "hide";

} else {

box.className = "box hide";

table.className = "";

for(var i = 0, len = listObj.length; i 

var tr = document.createElement("tr"); //createElement() 方法通过指定名称创建一个元素

tr.setAttribute("pid", listObj[i].pid);

//setAttribute() 方法创建或改变某个新属性。如果指定属性已经存在,则只设置该值。

//{"pid":值,"pImg":值,"pName":值,"pDesc":值,"price":值,"pCount":1},

tr.innerHTML = '

' +

'' +

'

' +

'

' +

        '' +

'

' +

'

' + '

'+ listObj[i].pDesc + '

' +

'

' +

'

' +

'-' +

'' +

'+' +

'

' +

'

' +

''+ listObj[i].price +  '' +

'

' +

'

' +

''+ listObj[i].price * listObj[i].pCount + '' +

'

' +

'

' +

'删除' +

'

';

tbody.appendChild(tr);//appendChild() 方法向节点添加最后一个子节点。

}

}

/*

功能：计算总价格

*/

var cks = document.querySelectorAll("tbody .ck");

//querySelectorAll()方法返回匹配指定 CSS 选择器元素的所有元素 。

function getTotalPrice() {

cks = document.querySelectorAll("tbody .ck");

var sum = 0;

for(var i = 0, len = cks.length; i 

if(cks[i].checked) { //如果当前被选中

var tr = cks[i].parentNode.parentNode;

//parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点，则返回 null。

var temp = tr.children[5].firstElementChild.innerHTML;

sum = Number(temp) + sum;

}

}

return sum;

}

/*循环遍历为每一个checkbox添加一个onchange事件*/

for(var i = 0, len = cks.length; i 

cks[i].onchange = function() {

checkAllChecked();

totalPrice.innerHTML = getTotalPrice();

}

}

/*全选实现*/

allCheck.onchange = function() {

if(this.checked) {

for(var i = 0, len = cks.length; i 

cks[i].checked = true;

}

} else {

for(var i = 0, len = cks.length; i 

cks[i].checked = false;

}

}

totalPrice.innerHTML = getTotalPrice();

}

var downs = document.querySelectorAll(".down"); //一组减的按钮

var ups = document.querySelectorAll(".up"); //一组加的按钮

var dels = document.querySelectorAll(".del"); //一组删除按钮

for(var i = 0, len = downs.length; i 

downs[i].onclick = function() {

var txtObj = this.nextElementSibling;//下一个兄弟节点

var tr = this.parentNode.parentNode;

var pid = tr.getAttribute("pid"); //getAttribute() 方法返回指定属性名的属性值。

txtObj.value = txtObj.value - 1;

if(txtObj.value 

txtObj.value = 1;

updateObjById(pid, 0)

} else {

updateObjById(pid, -1)

}

tr.children[0].firstElementChild.checked = true;

checkAllChecked();

var price = tr.children[4].firstElementChild.innerHTML;

tr.children[5].firstElementChild.innerHTML = price * txtObj.value;

totalPrice.innerHTML = getTotalPrice();

}

ups[i].onclick = function() {

var txtObj = this.previousElementSibling;//上一个兄弟节点

var tr = this.parentNode.parentNode;

var pid = tr.getAttribute("pid");

txtObj.value = Number(txtObj.value) + 1;

updateObjById(pid, 1)

tr.children[0].firstElementChild.checked = true;

checkAllChecked()

var price = tr.children[4].firstElementChild.innerHTML;

tr.children[5].firstElementChild.innerHTML = price * txtObj.value;

totalPrice.innerHTML = getTotalPrice();

}

dels[i].onclick = function() {

var tr = this.parentNode.parentNode;

var pid = tr.getAttribute("pid")

if(confirm("确定删除？")) {

//remove()  移除

tr.remove();

listObj = deleteObjByPid(pid);

}

if(listObj.length == 0) { //购物车为空

box.className = "box";

table.className = "hide";

} else {

box.className = "box hide";

table.className = "";

}

totalPrice.innerHTML = getTotalPrice();

}

}

/*检测是否要全选*/

function checkAllChecked() {

var isSelected = true; //全选是否会选中

for(var j = 0, len = cks.length; j 

if(cks[j].checked == false) {

isSelected = false;

break;

}

}

allCheck.checked = isSelected;

}

创建一个cart.js文件把上面的JavaScript代码放入其中。

以后从HTML页面调用，实现功能模块效果。