javascript - JS怎样才能让数字显示在对应的div2里面呢？
本文介绍了javascript - JS怎样才能让数字显示在对应的div2里面呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
就是点击显示按钮时就把按钮对应的左侧的数字显示在下面的蓝色的方块里面 我自己改成下面这样了 可是点击第一个div1里面显示时 数字都在第二个div1里面显示 点击第二个div1里面显示时也是在第二个div1里显示 而且数字显示的的都错的 还是显示第一个div1里面的数字 大家可以试一下 我看别人说用闭包 可是还没学过闭包 我这个代码应该改哪里呢？ 这个div1的个数是不固定的 不是我例子里面写死的就两个
<html>
<head>
<meta charset="utf-8">
<style>
.div2{width:50px;height:50px;background-color: blue;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementsByClassName('div1');
var oDiv2=document.getElementsByClassName('div2');
var oAge=document.getElementsByClassName('age');
for(i=0;i<oDiv1.length;i++){
oSh=oDiv1[i].getElementsByClassName("show");
num=i;
for(j=0;j<oSh.length;j++){
oSh[j].index=j;
oSh[j].onclick=function(){
age=oAge[this.index].innerHTML;
oDiv2[num].innerHTML=age;
}
}
}
}
</script>
</head>
<body>
<div class="div1">
<span class="age">111</span><span class="show">显示</span><br />
<span class="age">222</span><span class="show">显示</span><br />
<span class="age">333</span><span class="show">显示</span>
<div class="div2"></div>
</div>
<div class="div1">
<span class="age">444</span><span class="show">显示</span><br />
<span class="age">555</span><span class="show">显示</span><br />
<span class="age">666</span><span class="show">显示</span>
<div class="div2"></div>
</div>
</body>
</html>
解决方案
确实可以用闭包解决，但你这种方式有点麻烦，我写一个简单点的
window.onload=function(){
var list=document.getElementsByClassName("show");
for(var i=0;i<list.length;i++){
list[i].onclick=function(){
this.parentNode.getElementsByClassName("div2")[0].innerHTML=this.previousSibling.innerText
}
}
}
这篇关于javascript - JS怎样才能让数字显示在对应的div2里面呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
