JS中for循环中使用同一变量的方法及案例
for循环中加函数不能调用定义的变量？一个函数居然要加俩个变量，而且还没用？这不能忍，这篇文章是我整理如何使用for循环的同一变量，需要可直接复制使用。
问题
如何用js实现移入移出div变色（源码在最下面）
最麻烦的写法：
<script>javascript">
window.onload =function () {
var div = document.getElementsByClassName('div');
div[0].onmouseover=function () {
div[0].style.backgroundColor='aquamarine';
}
div[0].onmouseout=function () {
div[0].style.backgroundColor='pink';
}
div[1].onmouseover=function () {
div[1].style.backgroundColor='aquamarine';
}
div[1].onmouseout=function () {
div[1].style.backgroundColor='pink';
}
div[2].onmouseover=function () {
div[2].style.backgroundColor='aquamarine';
}
div[2].onmouseout=function () {
div[2].style.backgroundColor='pink';
}
div[3].onmouseover=function () {
div[3].style.backgroundColor='aquamarine';
}
div[3].onmouseout=function () {
div[3].style.backgroundColor='pink';
}
div[4].onmouseover=function () {
div[4].style.backgroundColor='aquamarine';
}
div[4].onmouseout=function () {
div[4].style.backgroundColor='pink';
}
div[5].onmouseover=function () {
div[5].style.backgroundColor='aquamarine';
}
div[5].onmouseout=function () {
div[5].style.backgroundColor='pink';
}
}
</script>
于是我想到了用for循环去做：
<script>javascript">
window.onload = function () {
var div = document.getElementsByClassName('div');
for (var i = 0; i < 7; i++) {
div[i].onmouseover = function () {
for (var i = 0; i < 7; i++) {
div[i].style.backgroundColor = 'aquamarine';
}
}
div[i].onmouseout = function () {
for (var i = 0; i < 7; i++) {
div[i].style.backgroundColor = 'pink';
}
}
}
}
</script>
然后出现的效果却不是我想要
我们想要的是不是移入移出任意一个，那个颜色改变啊！那为什么这个不可以实现呢？
因为这个是两层for循环，而两个循环的变量都为i，但是它们是不一样的值，就像名字一样，难道我叫张三，他也叫张三，那我们就是同一个人吗？
显然不是，记住，函数内部的for循环和外部的for循环的变量不是同一个变量
下面我为大家整理了在JS用的比较多的解决方法
方法
方法一（使用较简单）：使用let定义变量，let用来声明它的作用域的变量。
for (let i = 0; i < 10; i++) {
div[i].onmouseout = function () {
div[i].style.backgroundColor = 'pink';
}
}
方法二：分离作用域，再调用
for (var i = 0; i < 10; i++) {
a(i);
}
function a(n) {
div[n].onmouseout = function () {
div[n].style.backgroundColor = 'pink';
}
}
方法三：储存变量
for (var i = 0; i < 10; i++) {
div[i].index = i;
div[i].onmouseout = function () {
div[index].style.backgroundColor = 'pink';
}
}
方法四：闭包
for (var i = 0; i < 10; i++) {
(function (n) {
div[n].onmouseout = function () {
div[n].style.backgroundColor = 'pink';
};
})(i);
}
案例（这里用的是方法一）
代码如下：
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
width: 420px;
height: 260px;
}
.div {
float: left;
margin: 15px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>javascript">
window.onload =function () {
var div = document.getElementsByClassName('div');
for (let i =0;i<7;i++){
div[i].onmouseover=function () {
div[i].style.backgroundColor='aquamarine';
}
div[i].onmouseout=function () {
div[i].style.backgroundColor='pink';
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
效果图如下：
# 总结 上面的方法都是可以使用的，这些方法在很多地方都是可以使用，大家可以多多应用，大家也可以将这些方法些在我的案例里面去使用，加深对for循环的理解，这篇文章的目的是为了帮助大家理清循环的思路，让大家写JS的时能够简洁、美观，加强JS的实用性。
如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！
