这个购物车主要是由document节点进行操作的，主要功能就是商品的一些增删改查操作，这里就简单写下思路
1.先写全选功能，获取到全选按钮（allCheckBox）的复选框，添加点击事件函数
然后在获取到所有商品的复选框（cartCheckBox）可以通过getElementsByName来获取，
通过if判断全选按钮的checked是否为true，然后循环遍历商品的复选框，分别设置checked的属性达到
全选实现的功能，代码如下：
allCheckBox.onclick = function (){
if (allCheckBox.checked) {
for (var i = 0 ; i < cartCheckBoxs.length ; i++) {
cartCheckBoxs[i].checked = true;
if (cartCheckBoxs[i].checked) {
var chu = cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML;
var va = cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes[2].value;
cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML=parseInt(chu)*va;
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
} else{
for (var i = 0 ; i < cartCheckBoxs.length ; i++) {
cartCheckBoxs[i].checked = false;
cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
}
2.实现选择单个复选框，价格内容的变化，代码如下：
for (var i = 0 ; i < cartCheckBoxs.length ; i++) {
cartCheckBoxs[i].onclick = function(){
if (this.checked) {
var chu = this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML;
var va = this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes[2].value;
this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML=parseInt(chu)*va;
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}else{
this.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
}
3.购物车商品数量的增加和减少：
for(var i=0;i<cart6.length;i++){
var jian = cart6[i].getElementsByTagName('img')[0];
var add = cart6[i].getElementsByTagName('img')[1];
jian.onclick = function(){
if(this.nextSibling.nextSibling.value<2){
alert("数量不能小于0");
return;
}else{
this.nextSibling.nextSibling.value=parseInt(this.nextSibling.nextSibling.value)-1;
this.parentNode.nextSibling.nextSibling.innerHTML=(this.nextSibling.nextSibling.value) * (this.parentNode.previousSibling.previousSibling.innerHTML);
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
add.onclick = function(){
this.previousSibling.previousSibling.value=parseInt(this.previousSibling.previousSibling.value)+1;
this.parentNode.nextSibling.nextSibling.innerHTML=(this.previousSibling.previousSibling.value) * (this.parentNode.previousSibling.previousSibling.innerHTML);
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
4.购物车商品总价计算，代码如下：
function tolo(){
var sum=0;
for(var i=0;i<cart7.length;i++){
sum+=Number(cart7[i].innerHTML);
}
return sum;
}
5.购物车商品积分，代码如下:
function getCode(){
var ssm = 0;
for(var i=0;i<cart7.length;i++){
var code = cart7[i].previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;
var prace = cart7[i].previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;
var num = Number(cart7[i].innerHTML)/Number(prace);
code = Number(code);
console.log(code);
console.log(prace);
ssm += num*code;
console.log(ssm);
}
return ssm;
}
6.购物车删除相应商品，代码如下：
for(var j=0;j<cart8.length;j++){
var del = cart8[j].getElementsByTagName('a')[0];
del.onclick = function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
7.购物车删除所选项，代码如下：
deleteAll.onclick = function (){
for (var i = 0 ; i < cartCheckBoxs.length ; i++) {
if (cartCheckBoxs[i].checked) {
cartCheckBoxs[i].checked = false;
cartCheckBoxs[i].parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML='';
tol.innerHTML = tolo();
inte.innerHTML = getCode();
}
}
}
网友评论