From 9eb5098a4533a4eb21e996e72d98f2b2e2bb9c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E6=96=87=E6=9D=B0?= <1820896556@qq.com>
Date: Wed, 6 Dec 2023 11:18:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\350\264\255\347\211\251\350\275\246.md"  | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 "43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md"

diff --git "a/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md" "b/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md"
new file mode 100644
index 0000000..9034865
--- /dev/null
+++ "b/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md"	
@@ -0,0 +1,134 @@
+# 购物车
+
+~~~js
+ <script>
+    const dataArr = [
+      {
+        id: 1,
+        icon: 'img/火龙果.png',
+        isChecked: true,
+        num: 2,
+        price: 6,
+      },
+      {
+        id: 2,
+        icon: 'img/荔枝.png',
+        isChecked: false,
+        num: 7,
+        price: 20,
+      },
+      {
+        id: 3,
+        icon: 'img/榴莲.png',
+        isChecked: false,
+        num: 3,
+        price: 40,
+      },
+      {
+        id: 4,
+        icon: 'img/鸭梨.png',
+        isChecked: true,
+        num: 10,
+        price: 3,
+      },
+      {
+        id: 5,
+        icon: 'img/樱桃.png',
+        isChecked: false,
+        num: 20,
+        price: 34,
+      },
+    ]
+
+    // 1. 渲染业务
+    const tbody = document.querySelector('.tbody')
+    const price = document.querySelector('.price')
+    const checkAll = document.querySelector('.check-all input')
+
+    function render() {
+      let total = 0
+      const strArr = dataArr.map(function (ele, index) {
+        return `
+            <div class="tr" data-id="${index}">
+              <div class="td"><input type="checkbox" ${ele.isChecked ? 'checked' : ''} /></div>
+              <div class="td"><img src="${ele.icon}" alt="" /></div>
+              <div class="td">${ele.price}</div>
+              <div class="td">
+                <div class="my-input-number">
+                  <button class="decrease"> - </button>
+                  <span class="my-input">${ele.num}</span>
+                  <button class="increase"> + </button>
+                </div>
+              </div>
+              <div class="td">${ele.price * ele.num}</div>
+              <div class="td"><button class="button del">删除</button></div>
+          </div> 
+        `
+      })
+      tbody.innerHTML = strArr.join('')
+
+      // 全选按钮设置
+      checkAll.checked = dataArr.every(ele => ele.isChecked === true)
+      // 总价模块：只选择勾选的商品
+      const newArr = dataArr.filter(ele => ele.isChecked)
+
+      const totalPrice = newArr.reduce((prev, item) => prev += item.num * item.price, 0)
+      document.querySelector('.price-box .price').innerHTML = totalPrice.toFixed(2)
+      const totalNum = newArr.reduce((prev, item) => prev += item.num, 0)
+      document.querySelector('.pay').innerHTML = `结算(${totalNum})`
+      // 空空购物车是否显示
+      const empty = document.querySelector('.empty')
+      empty.style.display = dataArr.length === 0 ? 'block' : 'none'
+    }
+    render()
+
+
+    // 2. 事件委托
+    tbody.addEventListener('click', function (e) {
+      const id = e.target.parentNode.parentNode.dataset.id
+      // 删除业务
+      if (e.target.className === 'del') {
+        dataArr.splice(id, 1)
+        //渲染业务
+        render()
+      }
+      // 小复选框业务是否全选开控制总的复选框
+      if (e.target.tagName === 'INPUT') {
+        // alert(11)
+        dataArr[id].isChecked = e.target.checked
+        //渲染业务
+        render()
+      }
+
+      // 增加数量业务
+      if (e.target.className === "increase") {
+        const idNum = e.target.parentNode.parentNode.parentNode.dataset.id
+        dataArr[idNum].num++
+        render()
+      }
+      // 删除数量业务
+      if (e.target.className === "decrease") {
+        const idNum = e.target.parentNode.parentNode.parentNode.dataset.id
+        if (dataArr[idNum].num <= 1) {
+          dataArr[idNum].num = 1
+        } else {
+      dataArr[idNum].num--  
+          render()
+        }
+      }
+    })
+
+    // 3. 全选反选点击
+    // 3.1 点击全选修改数组所有选中状态为true
+    checkAll.addEventListener('click', function () {
+      dataArr.forEach(ele => ele.isChecked = this.checked)
+      // console.log(dataArr)
+      // 渲染页面
+      render()
+    })
+
+
+
+  </script>
+~~~
+
-- 
Gitee