一个简单的购物车实战案例

一个要做全栈的野心家

已于 2023-08-24 20:41:40 修改

阅读量420

点赞数 7

文章标签： html5 css javascript

于 2023-08-24 17:31:10 首次发布

本文链接：https://blog.csdn.net/m0_74441053/article/details/132477430

版权

# 一、创建一个购物车静态页面

（1）静态页面效果

（2）静态页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            border: 5px solid red;
            padding: 10px;
        }

        .box .title {
            width: 1200px;
            height: 50px;
            background-color: aqua;
        }

        .box .title div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods {
            width: 1200px;
        }

        .box .goods .content {
            width: 1200px;
            height: 50px;
            background-color: aqua;
            margin-top: 10px;
        }

        .box .goods .content div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods .content .c_num .k {
            width: 30px;

        }

        .box .goods .content .c_op .del {
            width: 40px;

        }
    </style>
</head>

<body>

    <div class="box">
        <div class="title">
            <div class="t_check">
                <input type="checkbox">
                选择
            </div>
            <div class="t_ID">编号</div>
            <div class="t_name">商品名称</div>
            <div class="t_price">商品价格</div>
            <div class="t_num">商品数量</div>
            <div class="t_subtotal">商品小计</div>
            <div class="t_op">操作</div>
        </div>
        <div class="goods">
            <div class="content">
                <div class="c_check">
                    <input type="checkbox">
                </div>
                <div class="c_ID">
                    <div class="q">1</div>
                </div>
                <div class="c_name">
                    <div class="name">手机</div>
                </div>
                <div class="c_price">
                    <div class="price">5999</div>
                </div>
                <div class="c_num">
                    <input type="button" value="-">
                    <input class="k" type="text" value="1">
                    <input type="button" value="+">
                </div>
                <div class="c_subtotal">
                    <div class="subtotal">
                        5999*1
                    </div>
                </div>
                <div class="c_op">
                    <input type="button" value="删除" class="del">
                </div>
            </div>

            <div class="content">
                <div class="c_check">
                    <input type="checkbox">
                </div>
                <div class="c_ID">
                    <div class="q">2</div>
                </div>
                <div class="c_name">
                    <div class="name">电脑</div>
                </div>
                <div class="c_price">
                    <div class="price">9999</div>
                </div>
                <div class="c_num">
                    <input type="button" value="-">
                    <input class="k" type="text" value="1">
                    <input type="button" value="+">
                </div>
                <div class="c_subtotal">
                    <div class="subtotal">
                        9999*1
                    </div>
                </div>
                <div class="c_op">
                    <input type="button" value="删除" class="del">
                </div>
            </div>

            <div class="content">
                <div class="c_check">
                    <input type="checkbox">
                </div>
                <div class="c_ID">
                    <div class="q">3</div>
                </div>
                <div class="c_name">
                    <div class="name">平板</div>
                </div>
                <div class="c_price">
                    <div class="price">8888</div>
                </div>
                <div class="c_num">
                    <input type="button" value="-">
                    <input class="k" type="text" value="1">
                    <input type="button" value="+">
                </div>
                <div class="c_subtotal">
                    <div class="subtotal">
                        8888*1
                    </div>
                </div>
                <div class="c_op">
                    <input type="button" value="删除" class="del">
                </div>
            </div>
        </div>

    </div>


</body>
<script>
    //用jquery方法实现隔行变色
    $(".content:even").css("background-color", "aquamarine")
    $(".content:odd").css("background-color", "pink")

</script>

</html>

（3）用js实现的动态页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            border: 5px solid red;
            padding: 10px;
        }

        .box .title {
            width: 1200px;
            height: 50px;
            background-color: aqua;
        }

        .box .title div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods {
            width: 1200px;
        }

        .box .goods .content {
            width: 1200px;
            height: 50px;
            background-color: aqua;
            margin-top: 10px;
        }

        .box .goods .content div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods .content .c_num .k {
            width: 30px;

        }

        .box .goods .content .c_num .control {
            width: 20px;
        }

        .box .goods .content .c_op .del {
            width: 40px;

        }

        .box .bo {
            width: 1200px;
            height: 50px;
            margin-top: 10px;
        }

        .box .bo .go {
            width: 150px;
            height: 50px;
            background-color: brown;
            float: right;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 50px;
        }

        .box .bo .go:hover {
            cursor: pointer;
        }

        .box .bo .t {
            width: 300px;
            float: right;
            font-size: 20px;
            line-height: 50px;

        }

        .box .bo .t .all {
            font-size: 30px;
            color: red;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <div class="t_check">
                <input type="checkbox" class="allChecked">
                选择
            </div>
            <div class="t_ID">编号</div>
            <div class="t_name">商品名称</div>
            <div class="t_price">商品价格</div>
            <div class="t_num">商品数量</div>
            <div class="t_subtotal">商品小计</div>
            <div class="t_op">操作</div>
        </div>
        <div class="goods"></div>
    </div>


</body>
<script>

    var goodarr = [
        {
            isChecked: true,
            name: "手机",
            price: 1,
            num: 1,
            subtotal: 1
        },
        {
            isChecked: false,
            name: "电脑",
            price: 2,
            num: 2,
            subtotal: 4
        },
        {
            isChecked: false,
            name: "平板",
            price: 3,
            num: 3,
            subtotal: 9
        },
    ]

    // 渲染页面
    function set(goodarr) {
        var str = ""
        var content = document.querySelectorAll(".goods")[0]
        for (var i = 0; i < goodarr.length; i++) {
            str += `
        <div class="content">
            <div class="c_check">
                <input type="checkbox" ${goodarr[i].isChecked ? "checked" : ''} class = "single_choice" data-index = "${i}">
            </div>
            <div class="c_ID">
                <div class="q">${i + 1}</div>
            </div>
            <div class="c_name">
                <div class="name">${goodarr[i].name}</div>
            </div>
            <div class="c_price">
                <div class="price">${goodarr[i].price}</div>
            </div>
            <div class="c_num">
                <input type="button" value="-" class = "control">
                <input class="k" type="text" value="${goodarr[i].num}">
                <input type="button" value="+" class = "control">
            </div>
            <div class="c_subtotal">
                <div class="subtotal">
                    ${goodarr[i].subtotal}
                </div>
            </div>
            <div class="c_op">
                <input type="button" value="删除" class="del" data-index = "${i}">
            </div>
        </div>`
        }
        str += `
        <div class="bo">
                <div class = "go">去结算</div>
                <div class="t">
                    总价: ￥<span class = "all"></span>
                </div>
                
            </div>
    `
        content.innerHTML = str
        $(".content:even").css("background-color", "aquamarine")
        $(".content:odd").css("background-color", "pink")

    }
    set(goodarr)

</script>

</html>

#二、给购物车添加一些功能

（1）设置单选框

    // 设置单选
    function choice() {
        //获得所有的类名为 single_choice 的复选框
        var single_choices = document.querySelectorAll(".single_choice")
        //给所有的单选按钮绑定事件
        for (var i = 0; i < single_choices.length; i++) {
            single_choices[i].onchange = function () {
                // this.getAttribute("data-index")  获得点击的那个按钮的那个数据的下标
                goodarr[this.getAttribute("data-index")].isChecked = !goodarr[this.getAttribute("data-index")].isChecked
                var flag = true//给一个参数，默认正确
                
                for (var j = 0; j < goodarr.length; j++) {
                    if (goodarr[j].isChecked == false) {
                        flag = false
                    }
                }
                //根据参数flag判断，改变全选框的状态
                if (flag) {
                    //获得类名为 allChecked 的复选框
                    var allCheckeds = document.querySelectorAll(".allChecked")[0]
                    allCheckeds.checked = true
                } else {
                    var allCheckeds = document.querySelectorAll(".allChecked")[0]
                    allCheckeds.checked = false
                }
                allChecked()//调用全选框方法
                setPrice() //调用总价格
            }
        }
    }

这段代码实现了一个单选功能。以下是逐句解释：

1. `var single_choices = document.querySelectorAll(".single_choice")` - 获取所有类名为 `"single_choice"` 的元素，并将它们存储在 `single_choices` 变量中。

2. `for (var i = 0; i < single_choices.length; i++) {` - 开始一个循环，循环遍历 `single_choices` 中的元素。

3. `single_choices[i].onchange = function () {` - 为当前循环的元素添加一个 `onchange` 事件监听器，当元素的值发生改变时触发。

4. `goodarr[this.getAttribute("data-index")].isChecked = !goodarr[this.getAttribute("data-index")].isChecked` - 获取当前元素的 `data-index` 属性的值，并根据该值来修改 `goodarr` 数组中对应项的 `isChecked` 属性的值。`!` 操作符将 `isChecked` 的值取反。

5. `var flag = true` - 声明并初始化一个变量 `flag`，用来标记是否所有的选项都被选中。

6. `for (var j = 0; j < goodarr.length; j++) {` - 开始一个循环，循环遍历 `goodarr` 数组。

7. `if (goodarr[j].isChecked == false) {` - 判断当前循环的项的 `isChecked` 属性是否为 `false`。

8. `flag = false` - 如果当前循环的项的 `isChecked` 属性为 `false`，则将 `flag` 设置为 `false`。

9. `if (flag) {` - 判断 `flag` 的值是否为 `true`。

10. `var allCheckeds = document.querySelectorAll(".allChecked")[0]` - 获取类名为 `"allChecked"` 的元素，并将其存储在 `allCheckeds` 变量中。

11. `allCheckeds.checked = true` - 将 `allCheckeds` 元素的 `checked` 属性设为 `true`，即选中该元素。

12. `allCheckeds.checked = false` - 将 `allCheckeds` 元素的 `checked` 属性设为 `false`，即取消选中该元素。

13. `allChecked()` - 调用 `allChecked()` 函数。

14. `setPrice()` - 调用 `setPrice()` 函数。

（2）设置多选框

 // 设置全选状态
    function allChecked() {
        //利用计数器思想，声明一个计数器，默认值为零
        var count = 0;
        //获得类名为 allChecked 的复选框
        var allCheckeds = document.querySelectorAll(".allChecked")[0]
        //循环数组
        for (var i = 0; i < goodarr.length; i++) {
            //如果数组的 isChecked 为真计数器加一
            if (goodarr[i].isChecked) {
                count++
            }
        }
        //判断计数器个数与数组的长度值是否相同
        if (count == goodarr.length) {
            //相同给 allCheckeds 的复选框添加 checked 被选中
            allCheckeds.setAttribute("checked", "checked")
        } else {
            allCheckeds.removeAttribute("checked")
        }

    }

这段代码是一个用来设置全选状态的函数。函数的主要功能是根据已选中的复选框的数量来判断是否需要将全选复选框设为选中状态。

首先，函数中声明了一个计数器变量`count`，初始值为零。

接下来，通过`document.querySelectorAll(".allChecked")[0]`获取页面上类名为`allChecked`的复选框元素，并将其赋值给变量`allCheckeds`。

然后，使用一个循环来遍历一个名为`goodarr`的数组。数组中的每个元素都是一个对象，包含一个`isChecked`属性，该属性的值为布尔值，表示复选框是否被选中。如果某个元素的`isChecked`属性为真，说明对应的复选框被选中，那么计数器`count`就会加一。

接下来，通过判断计数器`count`的值是否等于数组`goodarr`的长度，来确定是否将全选复选框设为选中状态。如果两者相等，则使用`setAttribute`方法给`allCheckeds`复选框元素添加一个`checked`属性，表示被选中。否则，使用`removeAttribute`方法将`allCheckeds`复选框元素上的`checked`属性移除，表示未选中。

总结起来，这段代码的作用就是根据已选中的复选框的数量来设置全选复选框的状态。如果所有的复选框都被选中了，那么全选复选框也会被选中；否则，全选复选框不会被选中。

（3）设置总价格

 // 设置总价格
    function setPrice() {
        var all = document.querySelectorAll(".all")[0]
        var allmoney = 0;
        for (var i = 0; i < goodarr.length; i++) {
            if (goodarr[i].isChecked) {
                allmoney += goodarr[i].subtotal
            }
            all.innerText = allmoney
        }
    }

这段代码是一个函数，用于设置总价格。下面逐步解释它的实现步骤：

1. 首先，使用 `document.querySelectorAll` 方法选择页面中 class 为 "all" 的元素，并将第一个匹配到的元素存储在 `all` 变量中。

2. 接下来，创建一个变量 `allmoney`，用于存储总价格的初始值，初始值设置为0。

3. 然后，使用一个循环遍历 `goodarr` 数组，这个数组可能是在代码的其他地方定义的。

4. 在循环中，检查 `goodarr[i].isChecked` 的值，如果为真（即当前商品被选中），则将该商品的 `subtotal`（子总价）加到 `allmoney` 变量中。

5. 更新页面中 `all` 元素的文本内容为 `allmoney` 的值。通过修改 `innerText` 属性将 `allmoney` 的值显示在页面中。

总结：这段代码的作用是计算已选中商品的总价格，并将结果显示在页面的 class 为 "all" 的元素中。

（4）删除数据


    // 删除数据
    function del() {
        var dels = document.querySelectorAll(".del")
        for (var i = 0; i < dels.length; i++) {
            dels[i].onclick = function () {
                if (confirm("您要删除这个商品吗？")) {
                    goodarr.splice(this.getAttribute("data-index"), 1)
                    set(goodarr)
                }
            }
        }
    }

这段代码是一个用于删除数据的函数，它包括以下几个步骤：

1. 定义了一个名为del的函数，在这个函数中执行删除操作。
2. 使用querySelectorAll()方法获取所有class为"del"的元素，将其保存在一个名为dels的变量中。
3. 使用一个for循环遍历dels数组。
4. 在每次循环中，将当前元素的onclick事件设置为一个匿名函数。
5. 在匿名函数中，首先调用了一个confirm()方法来显示一个确认对话框，询问用户是否要删除该商品。
6. 如果用户点击了确认按钮，就执行if语句中的代码块。
7. 使用getAttribute()方法获取当前元素的"data-index"属性值，即商品在数组中的索引。
8. 使用splice()方法从数组goodarr中删除一个元素，该元素的索引由上一步获得。
9. 最后调用了一个名为set()的函数，并将更新后的数组goodarr作为参数传递给它，用于更新页面中的数据。

请注意，这段代码中的goodarr可能是定义在其他位置的数组变量，函数set()也可能是定义在其他位置的更新数据的函数。

（5）增加商品数量事件

 //设置增加数量按钮
    function setAugment() {
        var augment = document.querySelectorAll(".augment")
        for (var i = 0; i < augment.length; i++) {
            augment[i].onclick = function () {
                goodarr[this.getAttribute("data-index")].num++
                setPrice()
                setSubtotal()
                set(goodarr)
            }
        }
    }

这段代码的功能是为页面上的增加数量按钮设置点击事件。当点击按钮时，会增加对应商品的数量，并调用三个函数：setPrice()、setSubtotal()和set()。

具体解释如下：
1. 首先，通过querySelectorAll函数选取所有class为"augment"的元素，将它们存储在augment变量中。
2. 接着，通过for循环遍历augment数组中的每个元素。
3. 在循环内部，给当前遍历到的augment元素绑定一个点击事件的监听器，当点击事件触发时，执行以下操作：
- 通过this.getAttribute("data-index")获取当前点击的augment元素的自定义属性"data-index"的值（假设为index）。
- 然后，将goodarr数组中索引为index的元素的num属性值加1，表示增加对应商品的数量。
- 调用setPrice()函数，该函数的作用是更新页面上显示的商品总价。
- 调用setSubtotal()函数，该函数的作用是更新页面上显示的每个商品的小计。
- 最后，调用set()函数，传递goodarr数组作为参数，该函数的作用是更新页面上所有商品的数量。

总结：这段代码通过循环给每个增加数量按钮设置点击事件，点击按钮后会增加对应商品的数量，并更新页面上的价格和小计。

（6）减少商品数量事件

    //设置减少数量方法
    function setDecrease() {
        var decrease = document.querySelectorAll(".decrease")
        for (var i = 0; i < decrease.length; i++) {
            decrease[i].onclick = function () {
                goodarr[this.getAttribute("data-index")].num--
                setPrice()
                setSubtotal()
                set(goodarr)
            }
        }
    }

这段代码是用来设置一个减少数量的方法。具体解释如下：

首先，通过document.querySelectorAll(".decrease")获取到所有class为"decrease"的元素，并将其存储在一个名为"decrease"的变量中。

然后，通过一个for循环遍历所有的"decrease"元素。在每次循环中，我们给当前的"decrease"元素添加一个点击事件处理程序。

点击事件处理程序的功能是将goodarr数组中对应的元素的数量减1。goodarr是一个包含了相关商品信息的数组，通过this.getAttribute("data-index")可以获取到当前点击的"decrease"元素的"data-index"属性值，该值作为索引用来访问goodarr数组中的对应元素。

接下来，调用了三个函数：
1. setPrice()：设置商品价格。
2. setSubtotal()：设置小计金额。
3. set(goodarr)：将更新后的goodarr数组传给另一个函数set()来进行相关操作。

这段代码的作用是实现点击"decrease"按钮后，将对应商品的数量减1，并更新商品价格和小计金额。

（7）计算多个商品价格

    //设置商品小计
    function setSubtotal() {
        for (var i = 0; i < goodarr.length; i++) {
            goodarr[i].subtotal = goodarr[i].price * goodarr[i].num
        }
    }

这段代码是一个用于设置商品小计的函数。让我们逐步解释它的功能和工作原理：

1. 首先，这是一个带有名称为`setSubtotal`的函数声明。在代码中，函数名`setSubtotal`用于调用该函数执行。

2. 函数中使用一个循环来遍历`goodarr`数组中的每个商品。循环变量`i`从0开始，逐渐递增，直到达到`goodarr`数组的长度之前。

3. 在循环的每次迭代中，代码执行以下操作：

a. 访问`goodarr`数组中的第`i`个商品对象，并使用点符号(`.`)访问该对象的`price`和`num`属性。`price`属性表示商品的价格，`num`属性表示商品的数量。

b. 将商品的价格乘以商品的数量，得到商品的小计金额。将小计金额赋值给该商品对象的`subtotal`属性。

4. 循环继续执行，直到遍历完`goodarr`数组中的所有商品对象。

总结一下，这段代码的功能是根据每个商品的价格和数量计算出商品的小计金额，并将小计金额存储在商品对象的`subtotal`属性中。这样，在其他地方就可以方便地使用商品的小计金额了。

（8）单击全选框所有单选被选中

    //单击全选框所有单选被选中
    function setAllChecked() {
        var allChecked = document.querySelectorAll(".allChecked")[0]
        allChecked.onchange = function () {
            console.log(allChecked.checked);
            if (allChecked.checked) {
                for (var i = 0; i < goodarr.length; i++) {
                    console.log(goodarr[i].isChecked);
                    goodarr[i].isChecked = true
                }
                set(goodarr)
                setPrice()
            } else {
                for (var i = 0; i < goodarr.length; i++) {
                    console.log(goodarr[i].isChecked);
                    goodarr[i].isChecked = false
                }
                set(goodarr)
                setPrice()
            }
        }
    }

这段代码是一个JavaScript函数，当点击一个全选框时，它会将所有单选框设为被选中状态。

首先，代码通过`document.querySelectorAll(".allChecked")[0]`选择了文档中class为"allChecked"的第一个元素。通常来说，我们使用class选择器时会得到一个元素数组，所以通过`[0]`获取了第一个元素。

接下来，函数给选中的元素绑定了一个`onchange`事件处理函数。当复选框的选中状态发生变化时，触发这个事件处理函数。

事件处理函数中包含了一个条件语句，用于判断全选框的选中状态。如果全选框被选中，就会遍历一个名为`goodarr`的数组，并将每个元素的`isChecked`属性设为`true`。然后调用了两个函数：`set(goodarr)`和`setPrice()`。相反，如果全选框未被选中，就会将`goodarr`数组中每个元素的`isChecked`属性设为`false`，然后再次调用这两个函数。

总的来说，这段代码实现了一个全选功能，当点击全选框时，它会将所有单选框的选中状态与全选框的选中状态保持一致。

#三、附上完整版代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            border: 5px solid red;
            padding: 10px;
        }

        .box .title {
            width: 1200px;
            height: 50px;
            background-color: aqua;
        }

        .box .title div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods {
            width: 1200px;
        }

        .box .goods .content {
            width: 1200px;
            height: 50px;
            background-color: aqua;
            margin-top: 10px;
        }

        .box .goods .content div {
            float: left;
            width: calc(1200px / 7);
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .box .goods .content .c_num .k {
            width: 30px;
            text-align: center;

        }

        .box .goods .content .c_num .control {
            width: 20px;
        }

        .box .goods .content .c_op .del {
            width: 40px;

        }

        .box .bo {
            width: 1200px;
            height: 50px;
            margin-top: 10px;
        }

        .box .bo .go {
            width: 150px;
            height: 50px;
            background-color: brown;
            float: right;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 50px;
        }

        .box .bo .go:hover {
            cursor: pointer;
        }

        .box .bo .t {
            width: 300px;
            float: right;
            font-size: 20px;
            line-height: 50px;

        }

        .box .bo .t .all {
            font-size: 30px;
            color: red;

        }

        input:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <div class="t_check">
                <input type="checkbox" class="allChecked">
                选择
            </div>
            <div class="t_ID">编号</div>
            <div class="t_name">商品名称</div>
            <div class="t_price">商品价格</div>
            <div class="t_num">商品数量</div>
            <div class="t_subtotal">商品小计</div>
            <div class="t_op">操作</div>
        </div>
        <div class="goods"></div>
    </div>


</body>
<script>

    var goodarr = [
        {
            isChecked: false,
            name: "手机",
            price: 5999,
            num: 1,
            subtotal: 5999
        },
        {
            isChecked: false,
            name: "电脑",
            price: 9999,
            num: 1,
            subtotal: 9999
        },
        {
            isChecked: false,
            name: "平板",
            price: 8888,
            num: 1,
            subtotal: 8888
        },
    ]

    // 渲染页面
    function set(goodarr) {
        var str = ""
        var content = document.querySelectorAll(".goods")[0]
        for (var i = 0; i < goodarr.length; i++) {
            str += `
        <div class="content">
            <div class="c_check">
                <input type="checkbox" ${goodarr[i].isChecked ? "checked" : ''} class = "single_choice" data-index = "${i}">
            </div>
            <div class="c_ID">
                <div class="q">${i + 1}</div>
            </div>
            <div class="c_name">
                <div class="name">${goodarr[i].name}</div>
            </div>
            <div class="c_price">
                <div class="price">${goodarr[i].price}</div>
            </div>
            <div class="c_num">
                <input type="button" value="-" class = "control decrease" data-index = "${i}" ${goodarr[i].num == 1 ? "disabled" : ''} >
                <input class="k" type="text" value="${goodarr[i].num}">
                <input type="button" value="+" class = "control augment" data-index = "${i}">
            </div>
            <div class="c_subtotal">
                <div class="subtotal">
                    ${goodarr[i].subtotal}
                </div>
            </div>
            <div class="c_op">
                <input type="button" value="删除" class="del" data-index = "${i}">
            </div>
        </div>`
        }
        str += `
        <div class="bo">
                <div class = "go">去结算</div>
                <div class="t">
                    总价: ￥<span class = "all"></span>
                </div>
                
            </div>
    `
        content.innerHTML = str
        $(".content:even").css("background-color", "aquamarine")
        $(".content:odd").css("background-color", "pink")
        del()
        setPrice()
        choice()

        setAugment()
        setDecrease()
        setAllChecked()

    }
    set(goodarr)



    // 设置总价格
    function setPrice() {
        var all = document.querySelectorAll(".all")[0]
        var allmoney = 0;
        for (var i = 0; i < goodarr.length; i++) {
            if (goodarr[i].isChecked) {
                allmoney += goodarr[i].subtotal
            }
            all.innerText = allmoney
        }
    }

    // 删除数据
    function del() {
        var dels = document.querySelectorAll(".del")
        for (var i = 0; i < dels.length; i++) {
            dels[i].onclick = function () {
                if (confirm("您要删除这个商品吗？")) {
                    goodarr.splice(this.getAttribute("data-index"), 1)
                    set(goodarr)
                }
            }
        }
    }
    // 设置单选
    function choice() {
        //获得所有的类名为 single_choice 的复选框
        var single_choices = document.querySelectorAll(".single_choice")
        //给所有的单选按钮绑定事件
        for (var i = 0; i < single_choices.length; i++) {
            single_choices[i].onchange = function () {
                // this.getAttribute("data-index")  获得点击的那个按钮的那个数据的下标
                goodarr[this.getAttribute("data-index")].isChecked = !goodarr[this.getAttribute("data-index")].isChecked
                var flag = true//给一个参数，默认正确

                for (var j = 0; j < goodarr.length; j++) {
                    if (goodarr[j].isChecked == false) {
                        flag = false
                    }
                }
                //根据参数flag判断，改变全选框的状态
                if (flag) {
                    //获得类名为 allChecked 的复选框
                    var allCheckeds = document.querySelectorAll(".allChecked")[0]
                    allCheckeds.checked = true
                } else {
                    var allCheckeds = document.querySelectorAll(".allChecked")[0]
                    allCheckeds.checked = false
                }
                allChecked()//调用全选框方法
                setPrice() //调用总价格
            }
        }
    }

    // 设置全选状态
    function allChecked() {
        //利用计数器思想，声明一个计数器，默认值为零
        var count = 0;
        //获得类名为 allChecked 的复选框
        var allCheckeds = document.querySelectorAll(".allChecked")[0]
        //循环数组
        for (var i = 0; i < goodarr.length; i++) {
            //如果数组的 isChecked 为真计数器加一
            if (goodarr[i].isChecked) {
                count++
            }
        }
        //判断计数器个数与数组的长度值是否相同
        if (count == goodarr.length) {
            //相同给 allCheckeds 的复选框添加 checked 被选中
            allCheckeds.setAttribute("checked", "checked")
        } else {
            allCheckeds.removeAttribute("checked")
        }

    }
    //设置增加数量按钮
    function setAugment() {
        var augment = document.querySelectorAll(".augment")
        for (var i = 0; i < augment.length; i++) {
            augment[i].onclick = function () {
                goodarr[this.getAttribute("data-index")].num++
                setPrice()
                setSubtotal()
                set(goodarr)
            }
        }
    }
    //设置减少数量方法
    function setDecrease() {
        var decrease = document.querySelectorAll(".decrease")
        for (var i = 0; i < decrease.length; i++) {
            decrease[i].onclick = function () {
                goodarr[this.getAttribute("data-index")].num--
                setPrice()
                setSubtotal()
                set(goodarr)
            }
        }
    }

    //设置商品小计
    function setSubtotal() {
        for (var i = 0; i < goodarr.length; i++) {
            goodarr[i].subtotal = goodarr[i].price * goodarr[i].num
        }
    }
    //单击全选框所有单选被选中
    function setAllChecked() {
        var allChecked = document.querySelectorAll(".allChecked")[0]
        allChecked.onchange = function () {
            console.log(allChecked.checked);
            if (allChecked.checked) {
                for (var i = 0; i < goodarr.length; i++) {
                    console.log(goodarr[i].isChecked);
                    goodarr[i].isChecked = true
                }
                set(goodarr)
                setPrice()
            } else {
                for (var i = 0; i < goodarr.length; i++) {
                    console.log(goodarr[i].isChecked);
                    goodarr[i].isChecked = false
                }
                set(goodarr)
                setPrice()
            }
        }
    }










</script>

</html>

一个要做全栈的野心家

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
一个简单的购物车实战案例

goodarr[this.getAttribute("data-index")].isChecked` - 获取当前元素的 `data-index` 属性的值，并根据该值来修改 `goodarr` 数组中对应项的 `isChecked` 属性的值。如果全选框被选中，就会遍历一个名为`goodarr`的数组，并将每个元素的`isChecked`属性设为`true`。a. 访问`goodarr`数组中的第`i`个商品对象，并使用点符号(`.`)访问该对象的`price`和`num`属性。
复制链接

扫一扫