[已解决]如何解决后面this改为li【i】不受作用域的影响顺利更改

小黄练编程 · 发表于 2022-3-30 20:59:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>循环图片小原点点击</title>
                <style>
*{
        padding:0;
        margin:0;
}
     ul{
            display:flex;
     }

                li{
                        width:100px;
                        height:100px;
                        background-color:gray;
                }
                
                </style>
        </head>
        
        <body>
                <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                </ul>
                <script>
                var li=document.getElementsByTagName('li');
                for(var i=0;i<li.length;i++){
                        li[i].onclick=function(){
                        for(var i=0;i<li.length;i++)
                        {
                                li[i].style.backgroundColor='';
                        }
                        this.style.backgroundColor='pink';
                }
                
        }
                </script>
        </body>
</html>

最佳答案

月排行榜 / 总排行榜

ba21

2022-3-30 22:30:14

小黄练编程发表于 2022-3-30 21:47

this 就是当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。

                <script>
                // 1.1. script脚本页面加载便执行，进行相关绑定设置。
                
                var li=document.getElementsByTagName('li');
                // 1.2. 页面加载时遍历一遍li标签，进行相关绑定设置。
                for(var i=0;i<li.length;i++)
                {
                    // 1.3 给每个li标签绑定事件
                    li[i].onclick=function()
                    {
                        // 2.1 当某个标签点击时，遍历所有li标签进行设置
                        for(var j=0;j<li.length; j++)
                        {
                            li[j].style.backgroundColor='transparent';
                            if(li[j]==this)
                            {
                                li[j].style.backgroundColor='pink'; // 2.3 到这不是一个意思？
                            }
                        }
                        //this.style.backgroundColor='pink'; // 2.2 这肯定是用this，给当前点击的li进行设置
                    }       
                    
                    // li[i]，也是页面加载时执行，这里不可能是你点击执行
                }
                </script>

跳转到最佳答案楼层

小黄练编程 · 发表于 2022-3-30 21:05:17

var li=document.getElementsByTagName('li');
                for(var a=0;a<li.length;a++){
                        li[a].onclick=function(){
                        for(var i=0;i<li.length;i++)
                        {
                                li[i].style.backgroundColor='';
                        }
                        li[a].style.backgroundColor='pink';
                }
                
        }


更改了li里的i为a，为啥没用。

小黄练编程 · 发表于 2022-3-30 21:07:06

var li=document.getElementsByTagName('li');
                for(var a=0;a<li.length;a++){
                        li[a].onclick=function(){
                        for(var i=0;i<li.length;i++)
                        {
                                li[i].style.backgroundColor='';
                        }
                        li[a].style.backgroundColor='pink';
                }
                
        }
更改了li里的i为a，为何没用，如果最后一个函数里找不到a，不是应该往上找吗，然后确定了是绑定了该事件的li也就是this表示的li

ba21 · 发表于 2022-3-30 21:17:51

你是想这样吧。

                var li=document.getElementsByTagName('li');
                for(var i=0;i<li.length;i++){
                        li[i].onclick=function(){
                        for(var i=0;i<li.length;i++)
                        {
                                li[i].style.backgroundColor='transparent';
                        }
                        this.style.backgroundColor='pink';
                }

小黄练编程 · 发表于 2022-3-30 21:47:23

ba21 发表于 2022-3-30 21:17
你是想这样吧。

                var li=document.getElementsByTagName('li');
                for(var i=0;i<li.length;i++){
                        li[i].onclick=function(){
                        for(var i=0;i<li.length;i++)
                        {
                                li[i].style.backgroundColor='transparent';
                        }
                        this.style.backgroundColor='pink';//this改为li【i】;
                }

ba21 · 发表于 2022-3-30 22:30:14

小黄练编程发表于 2022-3-30 21:47

this 就是当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。

                <script>
                // 1.1. script脚本页面加载便执行，进行相关绑定设置。
                
                var li=document.getElementsByTagName('li');
                // 1.2. 页面加载时遍历一遍li标签，进行相关绑定设置。
                for(var i=0;i<li.length;i++)
                {
                    // 1.3 给每个li标签绑定事件
                    li[i].onclick=function()
                    {
                        // 2.1 当某个标签点击时，遍历所有li标签进行设置
                        for(var j=0;j<li.length; j++)
                        {
                            li[j].style.backgroundColor='transparent';
                            if(li[j]==this)
                            {
                                li[j].style.backgroundColor='pink'; // 2.3 到这不是一个意思？
                            }
                        }
                        //this.style.backgroundColor='pink'; // 2.2 这肯定是用this，给当前点击的li进行设置
                    }       
                    
                    // li[i]，也是页面加载时执行，这里不可能是你点击执行
                }
                </script>

小黄练编程 · 发表于 2022-3-30 23:31:02

ba21 发表于 2022-3-30 22:30
this 就是当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>top栏切换</title>
                <style>
                #main{
                        position:relative;
                        width:600px;
                        height:500px;
                        background-color:gray;
                        margin:0 auto;
                }
                ul{
                        display:flex;
                        height:50px;
                        background-color:green;
                }
                ul li{
                        list-style:none;
                        margin-left:40px;
                        background-color:red;
                        text-align:center;
                        line-height:40px;
                        cursor:pointer;
                }
                ul li:hover{
                        background-color:yellow;
                        color:gray;
                }
                .one{
                        position:absolute;
                        top:50px;
                        left:0;
                        width:600px;
                        height:500px;
                        background-color:brown;
                }
                .two{
                        position:absolute;
                        top:50px;
                        left:0;
                        width:600px;
                        height:500px;
                        background-color:#FFC0CB;
                }
                .three{
                        position:absolute;
                        top:50px;
                        left:0;
                        width:600px;
                        height:500px;
                        background-color:deeppink;
                }
                .four{
                        position:absolute;
                        top:50px;
                        left:0;
                        width:600px;
                        height:500px;
                        background-color:#808080;
                }
                p{
                        width:300px;
                        height:300px;
                        margin-top:100px;
                        margin-left:200px;
                        text-align:center;
                        line-height:300px;
                        background-color:gray;
                }
                </style>
        </head>
        <body>
        <div id="main">
                <ul>
                        <li>商品生源地</li>
                        <li>商品价格</li>
                        <li>商品类型</li>
                        <li>商品功能</li>
                </ul>
                <div class="one"><p>来自法国</p></div>
                <div class="two"><p>1999元</p></div>
                <div class="three"><p>手机类</p></div>
                <div class="four"><p>打电话</p></div>
        </div>
        <script>
        var div=document.getElementById('main').getElementsByTagName('div');
    var li=document.getElementsByTagName('ul').getElementsByTagName('li');
            for( var i=0;i<div.length;i++){
                                        li[i].onclick=function(){
                                                        div[i].style.z-index=1;//为何这里出错；
                                                }
                                        }
        </script>
        </body>
</html>

这回还真碰到了这问题了

小黄练编程 · 发表于 2022-3-30 23:33:11

小黄练编程发表于 2022-3-30 23:31
这回还真碰到了这问题了

这回后面那个div【i】可不能用this了，我想实现点击li然后触发事件，那个li被点击然后相应下面的div显示出来.

账号		自动登录	找回密码
密码			立即注册