求大神帮忙看看关于JavaScript的问题

<script>

    var r1=document.getElementsByClassName('r1');

    var r2=document.getElementsByClassName('r2');

    console.log(r1);

    console.log(r2);

    for ( var i = r1.length - 1; i >= 0 ; i-- ) {

        r1[i].onmouseover=function(){

        r2[i].style.display='block';

    }

        r1[i].onmouseout=function(){

        r2[i].style.display='none';

    }

 }

</script>

因为你需要在事件内使用事件外的循环变量i。
当事件触发时，那个循环早就结束了，那时的i的值已经是循环最大值加1了。
所以需要用一些方式保存住当前循环的i的值。
方案一：用闭包保存住当前循环的i的值
for (var i = 0; i < arr.length; i++) {
    (function(i){
        arr[i].onclick = function () {
            alert(i);
        }
    })(i);
}
方案二：用let块作用域变量
for (var i = 0; i < arr.length; i++) {
    let k = i;
    arr[i].onclick = function () {
        alert(k);
    }
}
ps：IE11中在for语的()内声明的let是整个循环体中共用的，只有在{}内声明的let才是每次循环都独立的。
非ie的浏览器中可以在中在for语的()内声明let
for (let i = 0; i < arr.length; i++)
方案三：为事件元素设置一个index属性，在事件函数内通过this获取当前对象并访问index属性。
for (var i = 0; i < arr.length; i++) {
    arr[i].index = i;
    arr[i].onclick = function () {
        alert(this.index);
    }
}
 

我是初学者，不知道为什么两个伪数组的长度是一样的，但是循环里 r2 这部分会报错

看上去是个数组类型，其实不是，用 console.log(Array.isArray(r1))，返回false，是object类型，用for...in循环

 for ( var i = r1.length - 1; i >= 0 ; i-- ) {

      r1[i].onmouseover=function(){

        for(var j= r2.length - 1; j >= 0 ; j-- ){

          r2[j].style.color='red';

        }

      }

      r1[i].onmouseout=function(){

        for(var j= r2.length - 1; j >= 0 ; j-- ){

          r2[j].style.color='blue';

        }

      }

    }