淘寶購物車效果（加，減，刪除，全選）
阿新 • • 發佈：2018-12-19
效果：
頁面需要引入jquery，ArtTemplate
頁面用假資料進行渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } body{ padding:20px; color: #666; } .fl{ float: left; } .fr{ float: right; } table{ border-collapse: collapse; border-spacing: 0; border: 0; text-align: center; width: 937px; } th,td{ border: 1px solid #cadeff; } th{ background: #e2f2ff; border-top: 3px solid #a7cbff; height: 30px; } td{ padding: 10px; color: #444; } tbody tr:hover{ background: RGB(238,246,255); } .checkbox{width: 60px;} .goods{width: 300px;} .goods span{ width: 180px; margin-top: 20px; text-align: left; float: left; } .price{width: 130px;} .count{width: 90px;} .count .add, .count input, .count .reduce{ float: left; margin-left: -1px; position: relative; z-index: 0; } .count .add, .count .reduce{ height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; } .count .add:hover, .count .reduce:hover{ color: #f50; z-index: 3; border-color: #f60; cursor: pointer; } .count input{ width: 50px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; } .subtotal{ width: 150px; color: red; font-weight: bold; } .operation{width: 80px;} .operation span:hover, .a:hover{ cursor: pointer; color: red; text-decoration: underline; } img{ width: 100px; height: 80px; margin-right: 10px; float: left; } .foot{ width: 935px; margin-top: 10px; color: #666; height: 48px; border: 1px solid #c8c8c8; background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226)); position: relative; z-index: 8; } .foot div, .foot a{ line-height: 48px; height: 48px; } .foot .select-all{ width: 100px; height: 48px; line-height: 48px; padding-left: 5px; color: #666; } .foot .closing{ border-left: 1px solid #c8c8c8; width: 100px; text-align: center; color: #000; font-weight: bold; background: RGB(238,238,238); cursor: pointer; } .foot .total{ margin: 0 20px; cursor: pointer; } .foot #priceTotal, .foot #selectedTotal{ color: red; font-family: "微軟雅黑"; font-weight: bold; } .foot .select{ cursor: pointer; } .foot .select .arrow{ position: relative; top: -3px; margin-left: 3px; } .foot .select .down{ position: relative; top: 3px; display: none; } .show .select .down{ display: inline; } .show .select .up{ display: none; } .foot .select:hover .arrow{ color: red; } .foot .selected-view{ width: 935px; border: 1px solid #c8c8c8; position: absolute; height: auto; background: #fff; z-index: 9; bottom: 48px; left: -1px; display: none; } .show .selected-view{display: block;} .foot .selected-view div{height: auto;} .foot .selected-view .arrow{ font-size: 16px; line-height: 100%; color: #c8c8c8; position: absolute; right: 330px; bottom: -9px; } .foot .selected-view .arrow span{ color: #fff; position: absolute; left: 0; bottom: 1px; } #selectedViewList{ padding: 20px; margin-bottom: -20px; } #selectedViewList div{ display: inline-block; position: relative; width: 100px; height: 80px; border: 1px solid #ccc; margin: 10px; } #selectedViewList div span{ display: none; color: #fff; font-size: 12px; position: absolute; top: 0; right: 0; width: 60px; height: 18px; line-height: 18px; text-align: center; background: RGBA(0,0,0,.5); cursor: pointer; } #selectedViewList div:hover span{ display: block; } </style> </head> <body> <form action=""> <table id="cartTable"> <thead> <tr> <th><label><input class="check-all check" type="checkbox" /> 全選</label></th> <th>商品</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> </thead> <tbody id="J_newsListContainer"> <script id="ListContainer" type="text/html"> {{each list as value i}} <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/1.jpg" alt="" /><span>{{value.name}}</span></td> <td class="price">{{value.price}}</td> <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="{{value.num}}" /><span class="add">+</span></td> <td class="subtotal">{{value.price * value.num}}</td> <td class="operation"><span class="delete">刪除</span></td> </tr> {{/each}} </script> <!-- <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td> <td class="price">3888.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td> <td class="subtotal">3888.50</td> <td class="operation"><span class="delete">刪除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td> <td class="price">1428.50</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td> <td class="subtotal">1428.50</td> <td class="operation"><span class="delete">刪除</span></td> </tr> <tr> <td class="checkbox"><input class="check-one check" type="checkbox" /></td> <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td> <td class="price">640.60</td> <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td> <td class="subtotal">640.60</td> <td class="operation"><span class="delete">刪除</span></td> </tr> --> </tbody> </table> <div class="foot" id="foot"> <label class=" fl select-all"><input type="checkbox" class="check-all check" /> 全選</label> <a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >刪除</a> <div class="fr closing">結 算</div> <div class="fr total">合計：￥<span id="priceTotal">0.00</span></div> <div class="fr select" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div> <div class="selected-view"> <div id="selectedViewList" class="clearfix"> <div><img src="images/1.jpg"><span>取消選擇</span></div> </div> <span class="arrow">◆<span>◆</span></span> </div> </div> </form> </body> </html> </html> <script src="react-demos-master/build/jquery.min.js"></script> <script src="ArtTemplate.js"></script> <script src="index.js"></script>
//index.js var index = { proList: [ { "name": 'Casio/卡西歐 EX-TR350', "price": 20, "num": 1 }, { "name": '大衣', "price": 37.4, "num": 1 }, { "name": '手套', "price": 85.00, "num": 2 }, { "name": '襪子', "price": 12.00, "num": 2 }, { "name": '佳能 PowerShow', "price": 100, "num": 1 }, { "name": '索尼 DSC-WX300', "price": 120.22, "num": 1 } ], init: function() { var self = index; self.renderProList(); self.checkAll(); self.add(); self.reduce(); self.delete(); }, /*渲染商品列表*/ renderProList: function() { var self = index; var data = { "list": self.proList }; var html = template('ListContainer', data); $('#J_newsListContainer').html(html); }, /*全選控制*/ checkAll: function() { $("body").on('change', '.check', function() { if ($(this).hasClass("check-all")) { //全選按鈕 var list = $('#J_newsListContainer tr'); var numAll = 0; //總數量 var tollAll = 0; //總價格 list.each(function(index, value) { var count_input = +($(value).find('.count-input').val()); tollAll += count_input; numAll += +($(value).find('.subtotal').html()) * count_input; }) if ($(this).prop('checked')) { //選中 $(".check-all").prop("checked", true) //下面的全選也選中 $("#J_newsListContainer .check").prop("checked", true) //複選框全部選中 $("#selectedTotal").html(tollAll) $("#priceTotal").html(numAll) } else { //未選中 $(".check-all").prop("checked", false) //下面的全選也不選中 $("#J_newsListContainer .check").prop("checked", false) //複選框全部不選中 $("#selectedTotal").html(0) $("#priceTotal").html(0) } } else { //單選按鈕 var all = $("#J_newsListContainer tr").length; var list = $('#J_newsListContainer input:checked'); var num = 0; var price = 0; list.each(function(index, value) { var count_input = +($(value).parents("tr").find('.count-input').val()); num += count_input; price += +($(value).parents("tr").find('.subtotal').html()) * count_input; }) // 單選控制全選 if (all == list.length) { $(".check-all").prop("checked", true) //全選選中 } else { $(".check-all").prop("checked", false) //全選不選中 } if ($(this).prop('checked')) { //選中 $("#selectedTotal").html(num) $("#priceTotal").html(price) } else { //未選中 $("#selectedTotal").html(num) $("#priceTotal").html(price) } } }) }, /*加數量*/ add: function() { $("#J_newsListContainer").on('click', '.add', function() { var count = $(this).parents('tr').find('.count-input').val(); count = +(count) + 1; $(this).parents('tr').find('.count-input').val(count); var list = $('#J_newsListContainer input:checked'); var num = 0; var price = 0; list.each(function(index, value) { var count_input = +($(value).parents("tr").find('.count-input').val()); num += count_input; price += +($(value).parents("tr").find('.subtotal').html()) * count_input; }) $("#selectedTotal").html(num) $("#priceTotal").html(price) }) }, /*減數量*/ reduce: function() { $("#J_newsListContainer").on('click', '.reduce', function() { var count = $(this).parents('tr').find('.count-input').val(); if (count > 1) { count = +(count) - 1; $(this).parents('tr').find('.count-input').val(count); var list = $('#J_newsListContainer input:checked'); var num = 0; var price = 0; list.each(function(index, value) { var count_input = +($(value).parents("tr").find('.count-input').val()); num += count_input; price += +($(value).parents("tr").find('.subtotal').html()) * count_input; }) $("#selectedTotal").html(num) $("#priceTotal").html(price) } }) }, /*刪除*/ delete: function() { $("#J_newsListContainer").on('click', '.delete', function() { $(this).parents('tr').remove(); var list = $('#J_newsListContainer input:checked'); var num = 0; var price = 0; list.each(function(index, value) { var count_input = +($(value).parents("tr").find('.count-input').val()); num += count_input; price += +($(value).parents("tr").find('.subtotal').html()) * count_input; }) $("#selectedTotal").html(num) $("#priceTotal").html(price) }) } } index.init();