问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
1011382654
    11356998

    所有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>
    javascript
    阅读 4.3k
    7 个回答
    得票最新
    头像
    若川
      7k32431
      ✓ 已被采纳
      // 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";
        };
    }
}
      头像
      yszou
        4.9k2718

        自己加个类似 data-order="2" 的属性，不折腾。

        头像
        李十三
          13.6k31929

          给this_img的index赋值 记录顺序 然后点击获取这个值

          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";
        
        };
    }
}
          头像
          catchonme
            14621629

            典型的闭包问题

            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++){
            (function(i){
                this_img[i].addEventListener("click", function(){
                    this.className='on';
                    s_img[i].style.color="red";
                }, false);
            })(i)
        }
    }
            头像
            我可是兔子
              36911234

              在循环读取数据的时候，给每个所包含this_img加个索引值，每当触发onClick事件的时候读取这个索引值，这个值也就是s_img数组中的实际索引值。

              头像
              樊思雨
                30221536
                <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .on {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="this_img" onclick="img()">1 </div>
    <div class="this_img" onclick="img()">2 </div>
    <div class="this_img" onclick="img()">3 </div>
    <div class="this_img" onclick="img()">4 </div>
    <div class="this_img" onclick="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].index = i;
                this_img[i].onclick = function() {
                    this.className = 'on';
                    s_img[this.index].style.color = "red";

                };
            }
        }
    </script>
</body>

</html>

                是这样吗？

                头像
                Unique
                  81142546
                  你看这样行不行呢、正常情况下显示无色的图片、隐藏有色。在你点击时则显示有色的图片、隐藏无色。同样也达

到点击变色的目的、虽然实际是换了一张图片。
                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  被 2 篇内容引用
                  推荐问题
                  宣传栏