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(){&nbsp; &nbsp; var this_img = document.getElementsByClassName('this_img');&nbsp; &nbsp; var s_img=document.getElementsByClassName('s_img');&nbsp; &nbsp; for(let i=0;i<this_img.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; this_img[i].addEventListener("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.className='on';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s_img[i].style.color="red";&nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; }}// 2、闭包解决function img(){&nbsp; &nbsp; var this_img = document.getElementsByClassName('this_img');&nbsp; &nbsp; var s_img=document.getElementsByClassName('s_img');&nbsp; &nbsp; for(var i=0;i<this_img.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; (function(i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this_img[i].addEventListener("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.className='on';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s_img[i].style.color="red";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; &nbsp; &nbsp; })(i);&nbsp; &nbsp; }}// 3、ES5或ES6将DOM节点转数组解决function img(){&nbsp; &nbsp; var this_img = document.getElementsByClassName('this_img');&nbsp; &nbsp; var s_img=document.getElementsByClassName('s_img');&nbsp; &nbsp; var nodes = [].slice.call(this_img); // 也可以用ES6的Array.from将DOM节点转数组 // var nodes = Array.from(this_img);&nbsp; &nbsp; nodes.forEach(function(node,index) {&nbsp; &nbsp; &nbsp; &nbsp; node.addEventListener("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; node.className='on';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s_img[index].style.color="red";&nbsp; &nbsp; &nbsp; &nbsp; }, false);&nbsp; &nbsp; });}// 4、或者前面两个答案提供的方案function img(){&nbsp; &nbsp; var this_img = document.getElementsByClassName('this_img');&nbsp; &nbsp; var s_img=document.getElementsByClassName('s_img');&nbsp; &nbsp; for(var i=0;i<this_img.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; this_img[i].index = i;&nbsp; &nbsp; &nbsp; &nbsp; this_img[i].onclick =function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.className='on';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s_img[this.index].style.color="red";&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }}