原生js-购物车案例（三）已选商品添加和删除


原生js-购物车案例（三）已选商品添加和删除

在这里插入图片描述
一.
在这里插入图片描述
点击这个部分（id=foot）显示选中商品区
查看之前的css部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.foot .selected-view {
    width: 935px;
    border: 1px solid #c8c8c8;
    position: absolute;
    height: auto;
    background: #ffffff;
    z-index: 9;
    bottom: 48px;
    left: -1px;
    display:none;
}
.show .selected-view {
    display: block;
}

这个盒子之前display：none；
加入.show类让他display：block显示出来

1
2
3
var selected = document.getElementById("selected");
var foot = document.getElementById('foot');
var selectedViewList = document.getElementById("selectedViewList");

1
2
3
4
5
6
7
8
9
selected.onclick = function() {
    //单击foot出现已选商品层
    if (selectedTotal.innerHTML != 0) {
        foot.className = "foot show";
    } else {
        foot.className = "foot";
    }

}

向选中商品展示区添加商品（list部分）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function getTotal() {
    //结算和添加已选商品   函数功能
    var select = 0;
    var price = 0;
    var list = "";
    for (var i = 0; i < tr.length; i++) {
        //如果是复选框选中的状态，才能把值放入进去
        if (tr[i].getElementsByTagName("input")[0].checked) {

            select += parseInt(tr[i].getElementsByTagName("input")[1].value);
            price += parseFloat(tr[i].cells[4].innerHTML);
            list += "<div><img src='" + tr[i].getElementsByTagName("img")[0].src + "'><span index='" + i + "'>取消选择</span></div>";

        }
    }

    selectedTotal.innerHTML = select;
    priceTotal.innerHTML = price.toFixed(2);
    selectedViewList.innerHTML = list;

}

注意上述代码添加图片时，加个一个index标记后面会用到

二.在这里插入图片描述
点击取消商品：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
selectedViewList.onclick = function(e) {
    //用了事件委托的原理
    var e = window.event || e;
    var tar = e.target || e.srcElement;

    if (tar.nodeName == "SPAN") {
    //span指的就是取消商品的小灰框
    //就把对应的商品前的，复选框的状态为fasle

        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].checked = false;
        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].onclick();
        //此处的onclick事件，是之前写的有关check的事件，并且还直接调用了getTotal()函数
    }

}

---------------------------------------------------------------------------------------------------

这节完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var check = getClass("check");
var cartTable = document.getElementById("cartTable");
var tr = cartTable.tBodies[0].rows;
var selectedTotal = document.getElementById("selectedTotal");
var priceTotal = document.getElementById("priceTotal");
var selected = document.getElementById("selected");
var foot = document.getElementById('foot');
var selectedViewList = document.getElementById("selectedViewList");
for (var i = 0; i < check.length; i++) {

    check[i].onclick = function() {

        if (this.className == "check-all check") {

            for (var i = 0; i < check.length; i++) {
                check[i].checked = this.checked;
            }

        }

        getTotal();

    }
}


selected.onclick = function() {
    //单击foot出现已选商品层
    if (selectedTotal.innerHTML != 0) {
        foot.className = "foot show";
    } else {
        foot.className = "foot";
    }

}


selectedViewList.onclick = function(e) {
    //用了事件委托的原理
    var e = window.event || e;
    var tar = e.target || e.srcElement;

    if (tar.nodeName == "SPAN") {
        //就把对应的商品前的，复选框的状态为fasle

        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].checked = false;
        tr[tar.getAttribute("index")].getElementsByTagName("input")[0].onclick();
    }

}

function getTotal() {
    //结算和添加已选商品   函数功能
    var select = 0;
    var price = 0;
    var list = "";
    for (var i = 0; i < tr.length; i++) {
        //如果是复选框选中的状态，才能把值放入进去
        if (tr[i].getElementsByTagName("input")[0].checked) {

            select += parseInt(tr[i].getElementsByTagName("input")[1].value);
            price += parseFloat(tr[i].cells[4].innerHTML);
            list += "<div><img src='" + tr[i].getElementsByTagName("img")[0].src + "'><span index='" + i + "'>取消选择</span></div>";

        }
    }

    selectedTotal.innerHTML = select;
    priceTotal.innerHTML = price.toFixed(2);
    selectedViewList.innerHTML = list;

}
//函数==》实现获取class名称的
function getClass(check) {

    var arr = [];
    var doms = document.getElementsByTagName("*");
    for (var i = 0; i < doms.length; i++) {
        if (doms[i].className == check || doms[i].className.indexOf(" " + check) != -1 || doms[i].className.indexOf(check + " ") != -1) {
            arr.push(doms[i]);
        }
    }
    return arr;
}