为了后面div【i】.style.z-index=1;出错,Web开发,技术交流,鱼C论坛

小黄练编程 发表于 2022-3-30 23:36:51

为了后面div【i】.style.z-index=1;出错

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.onclick=function(){
div.style.z-index=1;//为何这里出错；
}
}
</script>
</body>
</html>

wp231957 发表于 2022-3-30 23:44:25

只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。

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.onclick=function()
            {
               for( var i=0;i<div.length;i++)
               { div.style.zIndex=-1;

               }
               if(this.innerText=='商品价格')
               {
                     div.style.zIndex=1;
               }
            }
         }
   </script>
   </body>
</html>

小黄练编程 发表于 2022-3-31 00:12:46

wp231957 发表于 2022-3-30 23:44
只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。

我设置了的。

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.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.flag = k; // 添加flag用于存储 k 的值
         li.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.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.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.onclick=function(){
            console.log(k);
         }

         // 方法1
         //li.flag = k;
         //li.onclick=function(){
         // console.log(this.flag);
         //}

         // 方法2
         //li.onclick=(function(j){
         // return function(){
         //    console.log(j);
         // }
         //})(k);

         // 方法3
         //(function(j){
         // li.onclick= function(){
         //    console.log(j);
         // }
         //})(k);
   }
   </script>
   </body>
</html>

页: [1]

鱼C论坛's Archiver

为了后面div【i】.style.z-index=1;出错