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

问题描述

问 题

所有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>

解决方案

// 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";
        };
    }
}

这篇关于javascript - js点击标签实现变色，思路有点问题求指正！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！