js点击标签实现变色，思路有点问题求指正！

Question

所有div的class相同，所有a标签的class也相同，因为这块数据是循环读取的。怎么才能实现点击第二个div然后对应第二个a标签的字体变成红色，第三个div对应第三个a标签这样。<style>.on{ background-color:#f00;}</style>    <div class="this_img" onMouseOver="img()">1 </div>    <div class="this_img" onMouseOver="img()">2 </div>    <div class="this_img" onMouseOver="img()">3 </div>    <div class="this_img" onMouseOver="img()">4 </div>    <div class="this_img" onMouseOver="img()">5 </div>        <a class="s_img">aa</a>    <a class="s_img">ab</a>    <a class="s_img">ac</a>    <a class="s_img">ad</a>    <a class="s_img">ae</a><script>function img(){        var this_img=document.getElementsByClassName('this_img');        var s_img=document.getElementsByClassName('s_img');        for(var i=0;i<this_img.length;i++){            this_img[i].onclick =function(){                this.className='on';                s_img[i].style.color="red";                                };            }        }</script>

Answer 1

// 1、ES6 let解决

function img(){

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

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

    for(let i=0;i<this_img.length;i++){

        this_img[i].addEventListener("click", function(){

            this.className='on';

            s_img[i].style.color="red";

        }, false);

    }

}

// 2、闭包解决

function img(){

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

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

    for(var i=0;i<this_img.length;i++){

        (function(i){

            this_img[i].addEventListener("click", function(){

                this.className='on';

                s_img[i].style.color="red";

            }, false);

        })(i);

    }

}

// 3、ES5或ES6将DOM节点转数组解决

function img(){

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

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

    var nodes = [].slice.call(this_img); // 也可以用ES6的Array.from将DOM节点转数组 // var nodes = Array.from(this_img);

    nodes.forEach(function(node,index) {

        node.addEventListener("click", function(){

            node.className='on';

            s_img[index].style.color="red";

        }, false);

    });

}

// 4、或者前面两个答案提供的方案

function img(){

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

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

    for(var i=0;i<this_img.length;i++){

        this_img[i].index = i;

        this_img[i].onclick =function(){

            this.className='on';

            s_img[this.index].style.color="red";

        };

    }

}