- A+
所属分类：Web前端
功能：点击每个多选复选框时，套餐价里的价格需要改变，状态不同时需要累加或减少，同时已选购的的数量需要改变
思路：
- 拿到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 }
