添加到购物车列表及相关商品推荐.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--<script type="text/javascript" src="js/tool.js"></script>--> <style type="text/css"> *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} .box{ width: 1200px; border: 1px solid; margin: 50px auto 0; } .box ul{ overflow: hidden; } .box ul li{ width: 260px; height: 100px; font-size: 12px; float: left; margin-right: 53px; margin-bottom: 15px; } .box .product a img{ float: left; width: 98px; height: 98px; border: 1px solid #ccc; margin-right: 10px; } .box .product .txt{ float: left; width: 150px; height: 36px; line-height: 18px; overflow: hidden; } .box .product .price{ float: left; width: 150px; color: #d91f20; font-size: 14px; margin-top: 5px; overflow: hidden; } .box .product .add_to_cart{ float: left; width: 105px; height: 30px; border: 1px solid #ccc; margin-top: 8px; text-align: center; line-height: 30px; } .header{ width: 1200px; /*height: 100px;*/ border: 1px solid #ccc; margin: 0 auto; } .header .title{ display: flex; justify-content: space-around; height: 30px; line-height: 30px; border: 1px solid #ccc; background: #f3f3f3; } .header .cart_list_box{ max-height: 306px; overflow: auto; } .header .cart_list{ border: 1px solid #ccc; display: flex; justify-content: space-between; border-bottom: none; } .header .cart_list li{ float: left; height: 50px; width: 200px; font-size: 14px; line-height: 50px; text-align: center; overflow: hidden; background: #fff4e8; } .header .cart_list li .img{ width: 50px; height: 50px; } .product_total{ width: 1200px; margin: 0 auto; overflow: hidden; outline: 1px solid #ccc; } .product_total .fr{ float: right; width: 280px; height: 50px; } .product_total .fr p{ float: left; line-height: 50px; color: #ccc; font-size: 12px; } .product_total .fr .calc{ float: right; width: 110px; height: 50px; background: #e64346; color: #fff; font-weight: bold; text-align: center; line-height: 50px; font-size: 18px; } .product_total .fr p #total{ color: orange; font-size: 22px; } .product_total .fr p i{ font-size: 20px; color: orange; font-style: normal; } .product_total .fl #removeAll{ float: left; margin-left: 500px; margin-top: 4px; width: 110px; height: 40px; background: #fff8f8; border: 1px solid #ffdfdf; color: #999; text-align: center; line-height: 40px; font-size: 16px; } </style> </head> <body> <div class="header"> <ul class="title"> <li>编号</li> <li>图片</li> <li>标题</li> <li>数量</li> <li>单价</li> <li>操作</li> </ul> <div class="cart_list_box"> </div> </div> <div class="product_total"> <div class="fl"> <button id="removeAll">清空购物车</button> </div> <div class="fr"> <p>合计:<i>¥</i><span id="total">00.00</span></p> <button class="calc">去结算</button> </div> </div> <div class="box"> <h3>购买了该商品的用户还购买了</h3> <ul class="con"> </ul> </div> <ul class="conModel"> <li style="display: none"> <div class="id" style="display:none">1</div> <a href=""><img class="img" src="images/01.jpg"></a> <p class="txt">益达(Extra)木糖醇无糖口香糖冰凉薄荷70粒98单瓶装</p> <span class="price">¥13.90</span> <a href="javascript:void(0)" class="add_to_cart">加入购物车</a> </li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> var json = [ {"id":"1","img":"images/01.jpg","txt":"益达(Extra)木糖醇无糖口香糖冰凉薄荷70粒98单瓶装","price":"¥13.90"}, {"id":"2","img":"images/02.jpg","txt":"益达(Extra)尊享护齿56g*3瓶京东定制装(草本精华+冰","price":"¥24.90"}, {"id":"3","img":"images/03.jpg","txt":"绿箭(DOUBLEMINT)无糖薄荷糖冰柠薄荷味35粒23.8g","price":"¥7.50"}, {"id":"4","img":"images/04.jpg","txt":"益达(Extra)木糖醇无糖口香糖香浓蜜瓜40粒56g单瓶装","price":"¥8.80"}, {"id":"5","img":"images/05.jpg","txt":"益达(Extra)无糖口香糖沁凉薄荷12片32g单盒装","price":"¥5.50"}, {"id":"6","img":"images/06.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶 益达口香糖 休闲零食","price":"¥8.80"}, {"id":"7","img":"images/07.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶*9口味组合休闲零食","price":"¥75.60"}, {"id":"8","img":"images/08.jpg","txt":"益达 无糖口香糖70粒摇一摇四口味合装 赠益达西瓜味24","price":"¥52.90"} ]; var parent = $(".con",$(".box")[0])[0]; for(var i = 0,len = json.length; i < len; i++){ var clone = $("li",$(".conModel")[0])[0].cloneNode(true); if((i+1) % 4 === 0){ clone.style.marginRight = "0"; } clone.style.display = "block"; clone.className = "product"; clone.children[0].innerHTML = json[i].id; clone.children[1].children[0].src = json[i].img; clone.children[2].innerHTML = json[i].txt; clone.children[3].innerHTML = json[i].price; parent.appendChild(clone); } // 动态添加购物车列表 var add_to_cart = $(".add_to_cart",$(".con")[0]); for(var j = 0,cartLen = add_to_cart.length; j < cartLen; j++){ add_to_cart[j].onclick = function(){ var cart_list = $(".cart_list",$(".header")[0]); for(var k =0, cart_list_len = cart_list.length; k < cart_list_len; k++){ if(this.parentNode.children[0].innerHTML === $("li",$(".cart_list")[k])[0].innerHTML ){ var num = ++cart_list[k].children[3].innerHTML; var prices2 = Number(cart_list[k].children[4].innerHTML.slice(1)); $("#total").text((Number($("#total").text()) + prices2).toFixed(2)); return; } } var clone = $(".title",$(".header")[0])[0].cloneNode(true); clone.className = "cart_list"; clone.children[0].innerHTML = this.parentNode.children[0].innerHTML; clone.children[1].innerHTML = this.parentNode.children[1].innerHTML; clone.children[2].innerHTML = this.parentNode.children[2].innerHTML; clone.children[3].innerHTML = "1"; clone.children[4].innerHTML = this.parentNode.children[3].innerHTML; clone.children[5].innerHTML = "<a href='javascript:void(0)' class='remove'>删除</a>"; $(".cart_list_box",$(".header")[0])[0].appendChild(clone); var prices1 = Number(clone.children[4].innerHTML.slice(1)); $("#total").text((Number($("#total").text()) + prices1).toFixed(2)); // 删除购物车列表内指定商品 for(var l = 0,remove_len = $(".remove").length; l < remove_len; l++){ $(".remove")[l].onclick = function(){ if(confirm("确认删除该商品?")){ var price = (this.parentNode.parentNode.children[4].innerHTML).slice(1); var num = this.parentNode.parentNode.children[3].innerHTML; var removePrices = price * num; $("#total").text( (Number($("#total").text()) - removePrices).toFixed(2)); this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } } } } } // 清空购物车 $("#removeAll").click(function(){ for(var i = 0,len = $(".cart_list_box")[0].children.length; i < len; i++){ $(".cart_list_box")[0].removeChild($(".cart_list_box")[0].children[0]); } $("#total").text("00.00"); }) //去结算 $(".calc").click(function () { window.location.href='http://www.baidu.com'; }) </script> </body> </html>