设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为了后面div【i】.style.z-index=1;出错
返回列表 发新帖
查看: 2308|回复: 4

[已解决]为了后面div【i】.style.z-index=1;出错

[复制链接]
小黄练编程
发表于 2022-3-30 23:36:51 | 显示全部楼层 |阅读模式

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

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

x 
[quote][url=forum.php?mod=redirect&goto=findpost&pid=5791339&ptid=211189]ba21 发表于 2022-3-30 22:30[/url]
this 就是 当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。[/quote]

[code]<!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>
[/code]
最佳答案
月排行榜 / 总排行榜
ba21
2022-3-31 00:01:27
前面的贴请结贴。
<!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('li');
            for( var i=0;i<li.length;i++)
            {
                li[i].onclick=function()
                {
                    for( var i=0;i<div.length;i++)
                    {   div[i].style.zIndex=-1;

                    }
                    if(this.innerText=='商品价格')
                    {
                        div[1].style.zIndex=1;
                    }
               }
            }
        </script>
        </body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

wp231957
发表于 2022-3-30 23:44:25 From FishC Mobile | 显示全部楼层
只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-3-31 00:01:27 | 显示全部楼层    本楼为最佳答案   
前面的贴请结贴。
<!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('li');
            for( var i=0;i<li.length;i++)
            {
                li[i].onclick=function()
                {
                    for( var i=0;i<div.length;i++)
                    {   div[i].style.zIndex=-1;

                    }
                    if(this.innerText=='商品价格')
                    {
                        div[1].style.zIndex=1;
                    }
               }
            }
        </script>
        </body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-31 00:12:46 | 显示全部楼层
wp231957 发表于 2022-3-30 23:44
只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。

我设置了的。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-3-31 12:42:39 | 显示全部楼层
如问题代码：
        <script>
        var div=document.getElementById('main').getElementsByTagName('div');
        var li=document.getElementsByTagName('li');
        for(var k=0; k<li.length; k++){
            li[k].onclick=function(){
                console.log(k);
            }
        }               
        </script>
再次回复你之前说的function中调用 i 出错的问题。更正这里的 i 变量 问题不是作用域问题 ，而是 代码形成了闭包，闭包中局部变量是引用而非值

解析问题代码：
1. 首先闭包中局部变量是引用，也就是说 console.log(k); 中的 k 是个地址，而不是值。
2. script代码在页面加载便执行。
3. 经过一轮 for(var k=0; k<li.length; k++) 后 k 最后的值是 k==li.length，k超出了数组下标。
4. 当进行点击li测试时，所有的onclick函数中的k其实是个地址，值k==li.lenght。在你原代码中 i，i超出数组下标，报错。

3种解决办法：
1. 标记法
       <script>
        var div=document.getElementById('main').getElementsByTagName('div');
        var li=document.getElementsByTagName('li');
        for(var k=0; k<li.length; k++){
            li[k].flag = k; // 添加flag用于存储 k 的值
            li[k].onclick=function(){
                console.log(this.flag);
            }
        }               
        </script>

2.
        <script>
        var div=document.getElementById('main').getElementsByTagName('div');
        var li=document.getElementsByTagName('li');
        for(var k=0; k<li.length; k++){            
            li[k].onclick=(function(j){
                return function(){
                    console.log(j);
                }
            })(k);
        }               
        </script>

3.
        <script>
        var div=document.getElementById('main').getElementsByTagName('div');
        var li=document.getElementsByTagName('li');
        for(var k=0; k<li.length; k++){            
            (function(j){
                li[k].onclick= function(){
                    console.log(j);
                }
            })(k);
        }               
        </script>

测试代码：
<!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('li');
        for(var k=0; k<li.length; k++){
            // 问题代码（最终k的值==li.length）
            li[k].onclick=function(){
                console.log(k);
            }
            
            // 方法1
            //li[k].flag = k;
            //li[k].onclick=function(){
            //    console.log(this.flag);
            //}
            
            // 方法2
            //li[k].onclick=(function(j){
            //    return function(){
            //        console.log(j);
            //    }
            //})(k);
            
            // 方法3
            //(function(j){
            //    li[k].onclick= function(){
            //        console.log(j);
            //    }
            //})(k);
        }               
        </script>
        </body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 17:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表