html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jd.css" />
<script type="text/javascript" src="js/jd.js"></script>
</head>
<body>
<!--导航栏开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href="">京东首页</a></li>
<li><a href="">配送至：北京</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></li>
</ul>
</div>
</div>
<!--导航结束-->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/1.png" />
<div class="search_div">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送至: </span>
<select>
<option>灞桥区</option>
<option>莲湖区</option>
<option>临潼区</option>
<option>碑林区</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="fav" id="all"
onclick="checkTest1(this)" /> 全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单的结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li><input type="checkbox" name="fav" onclick="checkTest2()" /</li>
<li><img src="img/1.jpg" width="90px"/></li>
<li><a>京东超市:长续航遥控飞机</a></li>
<li><a>颜色：黑色</a></li>
<li><a>￥182.5</a></li>
<li>
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="but_1">+</button>
</li>
<li>￥182.5</li>
<li>
<a href="">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li><input type="checkbox" name="fav" onclick="checkTest2()" /</li>
<li><img src="img/3.jpg" width="90px"/></li>
<li><a>京东超市:无线蓝牙耳机</a></li>
<li><a>颜色：白色</a></li>
<li><a>￥182.5</a></li>
<li>
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="but_1">+</button>
</li>
<li>￥182.5</li>
<li>
<a href="">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li><input type="checkbox" name="fav" onclick="checkTest2()" /</li>
<li><img src="img/4.jpg" width="90px"/></li>
<li><a>京东超市:西瓜雪糕</a></li>
<li><a>颜色：红色</a></li>
<li><a>182.5</a></li>
<li>
<button onclick="checkTest3(this,1)">-</button>
<input type="text" name="" id="" value="1" />
<button class="but_1" onclick="checkTest3(this,2)">+</button>
</li>
<li>￥182.5</li>
<li>
<a href="">删除</a><br />
<a href="">移到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li><input type="checkbox" name="fav" id="" value=""
onclick="checkTest1()"/>全选</li>
<li><a href="">删除选中商品</a></li>
<li><a href="">移到我的关注</a></li>
<li><a href="">清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已经选择<span>1</span>件商品</li>
<li>总价<span>$12</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算结束-->
</body>
</html>
js代码如下
var fav=document.getElementsByName("fav")
//判断是否全选
function checkTest1(th){
var flag=th.checked
//获得所有多选框对象
for(var i in fav){
fav[i].checked=flag
}
}
//单选决定全选操作
function checkTest2(){
var flag=true
for (var i=1;i<fav.length-1;i++){
if (!fav[i].checked){
flag=false
break
}
}
fav[0].checked=flag
fav[fav.length-1].checked=flag
}
//控制数量的增加或者减少
function checkTest3(th,sig){
if (sig=="1"){
//获得下一个节点的对象
var pre=th.nextElementSibling
//获得节点的值
if(Number(pre.value)>0){
pre.value=Number(pre.value)-1 //因为pre.value是一个str 所以需要转成数字
}
}else{
//获得上一个节点的对象
var pre=th.previousElementSibling
//获得节点的值
pre.value=Number(pre.value)+1
}
// 计算每个商品的总价格
// 获得每一个商品的单价
var val=pre.parentNode.previousElementSibling.innerHTML
//计算总价格
var zong=Number(val)*Number(pre.value)
//吧总的加个赋给指定的对象
pre.parentNode.nextElementSibling.innerHTML="￥"+zong
}
老师 我的这个计算总价格 一直显示NaN 我把单价里的美元符号删除了 还是不行 麻烦你看下
在html代码中 我的单击事件是在西瓜雪糕那块操作的
还有一个问题 这个获取商品单价节点 用的是父节点的兄弟节点 为什么不能在html代码中在单价节点那里直接写一个id 然后用getElementById 这个直接获取
这里面能查到，但是
这里面查不到，是什么原因
老师，为什么我没有加通配符，也可以输入两种类型呢
老师，为什么可变参数就是一个数组呢，这个T...是固定格式吗
老师，泛型为什么不能使用基本数据类型啊，必须是包装类吗
京公网安备 11011402011233号