87,920
社区成员
发帖
与我相关
我的任务
分享js for循环
要求点击任意一张图片得到它imgbox下面的img的src
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
overflow: hidden;
margin: 0 auto;
}
ul li {
list-style: none
}
li{
margin-top: 20px
}
</style>
</head>
<body>
<ul>
<li>
<div class="image">
<h1>imgBox1</h1>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
</div>
</li>
<li>
<div class="image">
<h1>imgBox2</h1>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
</div>
</li>
</ul>
<script>
var image = document.querySelectorAll('.image');
for(var i=0 ; i<image.length ; i++){
var imgs = image[i].getElementsByTagName('img');
imgs[i].onclick = function(){
for(var j=0 ; j<imgs.length ; j++){
console.log(imgs[j].src)
imgUrls.push(imgs[j].src);
}
}
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-04-23
- 打赏
- 举报
var imgs = document.querySelectorAll('.image img');
for(var i=0 ; i<imgs.length ; i++){
imgs[i].onclick = function(){
console.log(this.src)
imgUrls.push(this.src);
}
}
