<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Develop</title>
<link rel="stylesheet" type="text/css" href="css/index12.css" />
</head>
<body>
<header class="header">
<div class="logo"></div>
<nav class="nav">
<a href="" class="nav__item">课程</a>
<a href="" class="nav__item nav__item_icon_new">职业路径</a>
<a href="" class="nav__item">实战</a>
<a href="" class="nav__item">猿问</a>
<a href="" class="nav__item">手记</a>
</nav>
<div class="profile">
<a href="" class="profile__item profile__lock"></a>
<a href="" class="profile__item profile__bell"></a>
<a href="" class="profile__item profile__ava"></a>
</div>
<div class="search"><input type="text" class="search__input"><a href="" class="search__submit"></a></div>
</header>
<div id="contaner">
<div class="wrap">
<p class="car">我的购物车</p>
<div>
<div id="goodlist">
<div class="allSelect"><input type="checkbox">全选</div>
<div class="good">商品名称</div>
<div class="allPrice">总价</div>
<div class="onePrice">单价</div>
<div class="num">数量</div>
<div class="delet">操作</div>
</div>
<div class="list">
<div class="allSelect"><input type="checkbox" checked="checked"></div>
<div class="good">
<div class="goodpic"><img src="img/g1.jpg"></div>
<div class="goodtext">前端小白成长记</div>
</div>
<div class="allPrice">￥<span>123</span></div>
<div class="onePrice">￥<span>123</span></div>
<div class="num">
<span class="mul">-</span>
<input type="text" value="1" class="number">
<span class="add">+</span>
</div>
<div class="delet">删除</div>
</div>
<div class="list">
<div class="allSelect"><input type="checkbox" checked="checked"></div>
<div class="good">
<div class="goodpic"><img src="img/g1.jpg"></div>
<div class="goodtext">前端小白成长记</div>
</div>
<div class="allPrice">￥<span>123</span></div>
<div class="onePrice">￥<span>123</span></div>
<div class="num">
<span class="mul">-</span>
<input type="text" value="3" class="number">
<span class="add">+</span>
</div>
<div class="delet">删除</div>
</div>
<div class="list allprice">
<div class="payable">应付金额 <i>$</i><span>1231</span></div>
<div class="settlement">去结算</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="wrap">
<div class="footer-link">
<a href="" class="footer-link__item">网站首页</a>
<a href="" class="footer-link__item">企业合作</a>
<a href="" class="footer-link__item">人才招聘</a>
<a href="" class="footer-link__item">联系我们</a>
<a href="" class="footer-link__item">讲师招募</a>
<a href="" class="footer-link__item">常见问题</a>
<a href="" class="footer-link__item">意见反馈</a>
<a href="" class="footer-link__item">慕课大学</a>
<a href="" class="footer-link__item">友情链接</a>
</div>
<div class="footer-copy">Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
<div class="footer-share">
<a href="" class="footer-share__item footer-share__item_i_1"></a>
<a href="" class="footer-share__item footer-share__item_i_2"></a>
<a href="" class="footer-share__item footer-share__item_i_3"></a>
<span class="footer-share__weixin"></span>
</div>
</div>
</footer>
<script src="js/index.js"></script>
</script>
</body>
</html>
window.onload = function(){
var contaner = document.querySelector('#contaner');
var wrapElem = {
subtract : contaner.querySelectorAll('.mul'),
adds : contaner.querySelectorAll('.add'),
number : contaner.querySelectorAll('.number')
};
// console.log(wrapElem.number[0].value);
//数量加减
var index = 0;
for(var i=0; i<wrapElem.number.length; i++){
wrapElem.adds[i].id = i;
wrapElem.adds[i].onclick = function(){
wrapElem.number[this.id].value++;
}
}
}
样式没有添加，在做计算器的作业题时，没个商品有加减按钮，我使用for循环去做，当点击其中一个按钮时数量加一，但是遍历完之后i为数组长度不变，所以点击没效果。因此增加了元素的id，去遍历就可以了，在点击事件里i不能用。