jquery 获取div下的span_使用jquery代码，完成京东的购物车基本效果制作

最新推荐文章于 2024-05-18 20:31:13 发布

weixin_39599046

最新推荐文章于 2024-05-18 20:31:13 发布

阅读量287

点赞数

文章标签： jquery 获取div下的span

一、使用jQuery代码，完成京东购物车的基本效果制作

二、项目信息

项目时长：2小时

项目环境：HBuilder

项目所用知识点：jQuery

HTML代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>京东购物车页面</title><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/jd.css" /><link rel="stylesheet" href="icon/iconfont.css" /><script type="text/javascript" src="js/jquery-1.9.1.js" charset="utf-8"></script><script type="text/javascript" src="js/jd.js" charset="utf-8"></script></head><body><div class="top"><div class="warp"><ul class="nav_ul1"><li><a href="" style="margin-right: 20px;"><i class="iconfont"></i>京东首页</a></li><li><a href=""><i class="iconfont"></i>配送到：北京</a></li></ul><ul class="nav_ul2"><li><a href="">成俊敏</a><span>|</span></li><li><a href="">我的订单</a><span>|</span></li><li><a href="">我的京东</a><span>|</span></li><li><a href="">京东会员</a><span>|</span></li><li><a href="">企业采购</a><span>|</span></li><li><a href="">京东手机</a><span>|</span></li><li><a href="">关注京东</a><span>|</span></li><li><a href="">客户服务</a><span>|</span></li><li><a href="">网站导航</a><span>|</span></li></ul></div></div><div class="search"><div class="warp"><img src="img/logo.jpg" /><div class="search_div"><input type="text" placeholder="自营" class="search_text"/><input type="button" class="search_button" value="搜索" /></div></div></div><div class="title"><h3>全部商品</h3><div><span>配送至</span><select><option>昌平区</option><option>顺义区</option><option>大兴区</option><option>朝阳区</option><option>海淀区</option></select></div></div><div class="tips warp"><ul><li> <input type="checkbox" name="favs"/> 全选</li><li>商品 </li><li> 单价</li><li> 数量</li><li> 小计</li><li> 操作</li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="fav"/> </li><li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a>颜色：灰色+粉红</a> </li><li class="info_5"><a>￥182.5</a></li><li class="info_6"><button name="sub" value="0">-</button><input type="text" value="1"/><button name="add" value="1">+</button> </li><li class="info_7">￥182.5</li><li><a href="javascript:viod(0)" name="del">删除</a><br /><a>移到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="fav"/> </li><li class="info_2"> <img src="img/img3.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】好孩子婴儿柔护洗衣液</a></li><li class="info_4"><a>大小：1000毫升装</a> </li><li class="info_5"><a>￥35</a></li><li class="info_6"><button name="sub" value="0">-</button><input type="text" value="1"/><button name="add" value="1">+</button> </li><li class="info_7">￥35</li><li><a href="javascript:viod(0)" name="del">删除</a><br /><a>移到我的关注</a></li></ul></div><div class="info warp"><ul><li class="info_1"><input type="checkbox" name="fav"/> </li><li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li><li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li><li class="info_4"><a>颜色：灰色+粉红</a> </li><li class="info_5"><a>￥182.5</a></li><li class="info_6"><button name="sub" value="0">-</button><input type="text" value="1"/><button name="add" value="1">+</button></li><li class="info_7">￥182.5</li><li><a href="javascript:viod(0)" name="del">删除</a><br /><a>移到我的关注</a></li></ul></div><div class="balance warp" ><ul class="balance_ul1"><li><input type="checkbox" name="favs"/>全选</li><li><a href="">删除选中的商品</a></li><li><a href="">移到我的关注</a></li><li><a href="">清理下柜商品</a></li></ul><ul class="balance_ul2"><li>已选择<span id="snum">0</span>件商品</li><li>总价<span id="zongz">￥0.00</span></li><li><button>去结算</button></li></ul></div></body></html>

jQuery代码：

$(function(){//如果全选，则单选框和另一个全选框都勾选$("input[name=favs]").click(function(){/*得到全选的checked属性，返回值是true或false*/var flag=$(this).prop("checked");$("input[name=fav],input[name=favs]").prop("checked",flag);})//删除$("a[name=del]").click(function(){$(this).parent().parent().parent().remove();})//如果单选框有任意一个没选，则全选框不勾$("input[name=fav],input[name=favs],a[name=del]").click(function(){/*得到所有单选框*/var fav=$("input[name=fav]");var flag=true;fav.each(function(){if(!$(this).prop("checked")){flag=false;return;}})//单选都勾上，则全选勾上$("input[name=favs]").prop("checked",flag);//统计商品总数和总价var snum=0;//总件数var zongz=0;//总价fav.each(function(){var th=$(this);if(th.prop("checked")){snum=snum+Number(th.parent().parent().children().eq(5).children().eq(1).val());zongz=zongz+Number(th.parent().parent().children().eq(6)[0].innerText.substr(1));}})$("#zongz").text(zongz);$("#snum").text("￥"+snum);})//增减数量$("button[name=add],button[name=sub],a[name=del]").click(function(){var th=$(this);/*获取单价*/var dj=Number(th.parent().prev()[0].innerText.substr(1));/*获取单项总价*/var zj1=Number(th.parent().next()[0].innerText.substr(1));/*获取总件数*/var snum=Number($("#snum").text());/*获取总价*/var zongz=Number($("#zongz")[0].innerText.substr(1));if(th.val()==0){if(th.next().val()>0){//判断/*减*/th.next().val(Number(th.next().val())-1);th.parent().next().text("￥"+(zj1-dj));//console.log(th.parent().parent().children().eq(0).children().prop("checked"));if(th.parent().parent().children().eq(0).children().prop("checked")){//判断是否被选中,若被选中则总件数和总价减少$("#snum").text(snum-1);$("#zongz").text("￥"+(zongz-dj));}} }else{/*加*/th.prev().val(Number(th.prev().val())+1);th.parent().next().text("￥"+(zj1+dj));if(th.parent().parent().children().eq(0).children().prop("checked")){//判断是否被选中，若被选中则总件数和总价增加$("#sunm").text(snum+1);$("#zongz").text("￥"+(zongz+dj)); }} })})

三，BUG与心得

在写jquery代码过程中，$里面的代码，标点写成了中文格式，导致运行时总是不能统计上商品的总价和总数，查找了很多次错误也没有发现，对比其他同学作业，逐行找错误，进行对比，把整个Html又仔细翻看了一遍，后来还是从逻辑上找原因，终于发现错误代码块出现在什么地方。有这次教训，有了一个深刻的心得，与其费劲心力的从头翻看代码，不如推敲逻辑，能更快找出代码的错误。

四，项目运行图：

weixin_39599046

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫