小黄练编程 发表于 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]
查看完整版本: 为了后面div【i】.style.z-index=1;出错