功能：點擊每個多選復選框時，套餐價里的價格需要改變，狀態不同時需要累加或減少，同時已選購的的數量需要改變
思路：
- 拿到label，價格元素、數量元素
- 使用forEash遍歷所有laebl添加點擊事件
- 判斷是否選中，選中時讓數量++，同時把選中的多選框的價格加上原來價格賦值給選中后的套餐價
代碼實作：
1 <div class="detail"> 2 <div class="fitting"> 3 <h4 class="kt">選擇搭配</h4> 4 <div class="good-suits"> 5 <div class="master"> 6 <img src="./images/l-m01.png" alt=""> 7 <p>￥ 5299</p> 8 <i>+</i> 9 </div> 10 <ul class="suits"> 11 <li class="suitsItem"> 12 <img src="./images/dp01.png" alt=""> 13 <p>Feless費勒斯VR</p> 14 <label> 15 <input type="checkbox" value="39"> 16 <span>39</span> 17 </label> 18 </li> 19 <li class="suitsItem"> 20 <img src="./images/dp02.png" alt=""> 21 <p>Feless費勒斯VR</p> 22 <label> 23 <input type="checkbox" value="50"> 24 <span>50</span> 25 </label> 26 </li> 27 <li class="suitsItem"> 28 <img src="./images/dp03.png" alt=""> 29 <p>Feless費勒斯VR</p> 30 <label> 31 <input type="checkbox" value="59"> 32 <span>59</span> 33 </label> 34 </li> 35 <li class="suitsItem"> 36 <img src="./images/dp04.png" alt=""> 37 <p>Feless費勒斯VR</p> 38 <label> 39 <input type="checkbox" value="99"> 40 <span>99</span> 41 </label> 42 </li> 43 </ul> 44 <div class="result"> 45 <div class="num">已選購0件商品</div> 46 <p class="price-tit">套餐價</p> 47 <p class="price">￥5299</p> 48 <button class="addShopcar">加入購物車</button> 49 </div> 50 </div> 51 </div> 52 </div>
1 setMenu() 2 // 套餐價 3 function setMenu() { 4 var suits = document.querySelectorAll('.suits .suitsItem label') 5 // 獲取商品計件元素 6 var count = document.querySelector('.result .num') 7 // 初始化數量 8 var checkNum = 0 9 suits.forEach(function (item, index) { 10 // 每個label系結點擊事件 11 item.onclick = function () { 12 // 點擊選擇按鈕時，獲取套餐價里面的價格，同時需要判斷input的選中狀態，進行相應的加減 13 var oPrice = document.querySelector('.result .price') 14 var tipPrice = +item.querySelector('span').textContent 15 // 小件價格 在input節點 16 // 判斷是否被選中 17 if(item.children[0].checked){ 18 checkNum++ 19 // 獲取數量 20 count.textContent = `已選購${checkNum}件商品` 21 // 提取從1開始的字串， 套餐價的價格，獲取套餐價要實時獲取 22 var newPrice = +oPrice.textContent.slice(1) 23 // console.log(tipPrice) 24 oPrice.textContent = '￥' + (newPrice + tipPrice) 25 26 }else{ 27 checkNum-- 28 // 獲取數量, 29 count.textContent = `已選購${checkNum}件商品` 30 // 提取從1開始的字串， 套餐價的價格 31 var newPrice = +oPrice.textContent.slice(1) 32 oPrice.textContent = '￥'+ (newPrice - tipPrice) 33 } 34 } 35 }) 36 }
現在實作后，就會產生一個效果，點擊復選框可以計算執行，點擊label其他元素就不會生效了，然后問了下大佬，才發現點擊input其他地方進來執行了兩次，也就是說里面會冒泡，本來想著阻止事件冒泡，結果下面的代碼不執行了，
解決方法：給input系結事件即可
1 setMenu() 2 // 套餐價 3 function setMenu() { 4 var suits = document.querySelectorAll('.suits .suitsItem label input') 5 // 獲取商品計件元素 6 var count = document.querySelector('.result .num') 7 // 初始化數量 8 var checkNum = 0 9 suits.forEach(function (item, index) { 10 // 每個label系結點擊事件 11 item.onclick = function () { 12 // 他會獲取文本節點 13 // console.log(item.nextSibling) 14 // 點擊選擇按鈕時，獲取套餐價里面的價格，同時需要判斷input的選中狀態，進行相應的加減 15 var oPrice = document.querySelector('.result .price') 16 // 小件價格 在input節點 17 var tipPrice = +item.nextElementSibling.textContent 18 // 判斷是否被選中 19 if(item.checked){ 20 checkNum++ 21 // 獲取數量 22 count.textContent = `已選購${checkNum}件商品` 23 // 提取從1開始的字串， 套餐價的價格，獲取套餐價要實時獲取 24 var newPrice = +oPrice.textContent.slice(1) 25 // console.log(tipPrice) 26 oPrice.textContent = '￥' + (newPrice + tipPrice) 27 28 }else{ 29 checkNum-- 30 // 獲取數量, 31 count.textContent = `已選購${checkNum}件商品` 32 // 提取從1開始的字串， 套餐價的價格 33 var newPrice = +oPrice.textContent.slice(1) 34 oPrice.textContent = '￥'+ (newPrice - tipPrice) 35 } 36 } 37 }) 38 }
持續記錄學習中遇到的問題，寫的不是很好，還望諒解！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/303440.html
標籤：JavaScript