手记

使用for遍历数组后,点击按钮没效

<!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不能用。

0人推荐
随时随地看视频
慕课网APP