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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 为了后面div【i】.style.z-index=1;出错
返回列表 发新帖
查看: 2684|回复: 4

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

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

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

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

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

  5. [code]<!DOCTYPE html>
  6. <html>
  7.         <head>
  8.                 <meta charset="utf-8">
  9.                 <title>top栏切换</title>
  10.                 <style>
  11.                 #main{
  12.                         position:relative;
  13.                         width:600px;
  14.                         height:500px;
  15.                         background-color:gray;
  16.                         margin:0 auto;
  17.                 }
  18.                 ul{
  19.                         display:flex;
  20.                         height:50px;
  21.                         background-color:green;
  22.                 }
  23.                 ul li{
  24.                         list-style:none;
  25.                         margin-left:40px;
  26.                         background-color:red;
  27.                         text-align:center;
  28.                         line-height:40px;
  29.                         cursor:pointer;
  30.                 }
  31.                 ul li:hover{
  32.                         background-color:yellow;
  33.                         color:gray;
  34.                 }
  35.                 .one{
  36.                         position:absolute;
  37.                         top:50px;
  38.                         left:0;
  39.                         width:600px;
  40.                         height:500px;
  41.                         background-color:brown;
  42.                 }
  43.                 .two{
  44.                         position:absolute;
  45.                         top:50px;
  46.                         left:0;
  47.                         width:600px;
  48.                         height:500px;
  49.                         background-color:#FFC0CB;
  50.                 }
  51.                 .three{
  52.                         position:absolute;
  53.                         top:50px;
  54.                         left:0;
  55.                         width:600px;
  56.                         height:500px;
  57.                         background-color:deeppink;
  58.                 }
  59.                 .four{
  60.                         position:absolute;
  61.                         top:50px;
  62.                         left:0;
  63.                         width:600px;
  64.                         height:500px;
  65.                         background-color:#808080;
  66.                 }
  67.                 p{
  68.                         width:300px;
  69.                         height:300px;
  70.                         margin-top:100px;
  71.                         margin-left:200px;
  72.                         text-align:center;
  73.                         line-height:300px;
  74.                         background-color:gray;
  75.                 }
  76.                 </style>
  77.         </head>
  78.         <body>
  79.         <div id="main">
  80.                 <ul>
  81.                         <li>商品生源地</li>
  82.                         <li>商品价格</li>
  83.                         <li>商品类型</li>
  84.                         <li>商品功能</li>
  85.                 </ul>
  86.                 <div class="one"><p>来自法国</p></div>
  87.                 <div class="two"><p>1999元</p></div>
  88.                 <div class="three"><p>手机类</p></div>
  89.                 <div class="four"><p>打电话</p></div>
  90.         </div>
  91.         <script>
  92.         var div=document.getElementById('main').getElementsByTagName('div');
  93.     var li=document.getElementsByTagName('ul').getElementsByTagName('li');
  94.             for( var i=0;i<div.length;i++){
  95.                                         li[i].onclick=function(){
  96.                                                         div[i].style.z-index=1;//为何这里出错；
  97.                                                 }
  98.                                         }
  99.         </script>
  100.         </body>
  101. </html>
复制代码

[/code]
最佳答案
月排行榜 / 总排行榜
ba21
2022-3-31 00:01:27
前面的贴请结贴。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>top栏切换</title>
  6.                 <style>
  7.                 #main{
  8.                         position:relative;
  9.                         width:600px;
  10.                         height:500px;
  11.                         background-color:gray;
  12.                         margin:0 auto;
  13.                 }
  14.                 ul{
  15.                         display:flex;
  16.                         height:50px;
  17.                         background-color:green;
  18.                 }
  19.                 ul li{
  20.                         list-style:none;
  21.                         margin-left:40px;
  22.                         background-color:red;
  23.                         text-align:center;
  24.                         line-height:40px;
  25.                         cursor:pointer;
  26.                 }
  27.                 ul li:hover{
  28.                         background-color:yellow;
  29.                         color:gray;
  30.                 }
  31.                 .one{
  32.                         position:absolute;
  33.                         top:50px;
  34.                         left:0;
  35.                         width:600px;
  36.                         height:500px;
  37.                         background-color:brown;
  38.                 }
  39.                 .two{
  40.                         position:absolute;
  41.                         top:50px;
  42.                         left:0;
  43.                         width:600px;
  44.                         height:500px;
  45.                         background-color:#FFC0CB;
  46.                 }
  47.                 .three{
  48.                         position:absolute;
  49.                         top:50px;
  50.                         left:0;
  51.                         width:600px;
  52.                         height:500px;
  53.                         background-color:deeppink;
  54.                 }
  55.                 .four{
  56.                         position:absolute;
  57.                         top:50px;
  58.                         left:0;
  59.                         width:600px;
  60.                         height:500px;
  61.                         background-color:#808080;
  62.                 }
  63.                 p{
  64.                         width:300px;
  65.                         height:300px;
  66.                         margin-top:100px;
  67.                         margin-left:200px;
  68.                         text-align:center;
  69.                         line-height:300px;
  70.                         background-color:gray;
  71.                 }
  72.                 </style>
  73.         </head>
  74.         <body>
  75.         <div id="main">
  76.                 <ul>
  77.                         <li>商品生源地</li>
  78.                         <li>商品价格</li>
  79.                         <li>商品类型</li>
  80.                         <li>商品功能</li>
  81.                 </ul>
  82.                 <div class="one"><p>来自法国</p></div>
  83.                 <div class="two"><p>1999元</p></div>
  84.                 <div class="three"><p>手机类</p></div>
  85.                 <div class="four"><p>打电话</p></div>
  86.         </div>
  87.         <script>
  88.         var div=document.getElementById('main').getElementsByTagName('div');
  89.         var li=document.getElementsByTagName('li');
  90.             for( var i=0;i<li.length;i++)
  91.             {
  92.                 li[i].onclick=function()
  93.                 {
  94.                     for( var i=0;i<div.length;i++)
  95.                     {   div[i].style.zIndex=-1;

  97.                     }
  98.                     if(this.innerText=='商品价格')
  99.                     {
  100.                         div[1].style.zIndex=1;
  101.                     }
  102.                }
  103.             }
  104.         </script>
  105.         </body>
  106. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

使用道具 举报

ba21
发表于 2022-3-31 00:01:27 | 显示全部楼层    本楼为最佳答案   
前面的贴请结贴。
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>top栏切换</title>
  6.                 <style>
  7.                 #main{
  8.                         position:relative;
  9.                         width:600px;
  10.                         height:500px;
  11.                         background-color:gray;
  12.                         margin:0 auto;
  13.                 }
  14.                 ul{
  15.                         display:flex;
  16.                         height:50px;
  17.                         background-color:green;
  18.                 }
  19.                 ul li{
  20.                         list-style:none;
  21.                         margin-left:40px;
  22.                         background-color:red;
  23.                         text-align:center;
  24.                         line-height:40px;
  25.                         cursor:pointer;
  26.                 }
  27.                 ul li:hover{
  28.                         background-color:yellow;
  29.                         color:gray;
  30.                 }
  31.                 .one{
  32.                         position:absolute;
  33.                         top:50px;
  34.                         left:0;
  35.                         width:600px;
  36.                         height:500px;
  37.                         background-color:brown;
  38.                 }
  39.                 .two{
  40.                         position:absolute;
  41.                         top:50px;
  42.                         left:0;
  43.                         width:600px;
  44.                         height:500px;
  45.                         background-color:#FFC0CB;
  46.                 }
  47.                 .three{
  48.                         position:absolute;
  49.                         top:50px;
  50.                         left:0;
  51.                         width:600px;
  52.                         height:500px;
  53.                         background-color:deeppink;
  54.                 }
  55.                 .four{
  56.                         position:absolute;
  57.                         top:50px;
  58.                         left:0;
  59.                         width:600px;
  60.                         height:500px;
  61.                         background-color:#808080;
  62.                 }
  63.                 p{
  64.                         width:300px;
  65.                         height:300px;
  66.                         margin-top:100px;
  67.                         margin-left:200px;
  68.                         text-align:center;
  69.                         line-height:300px;
  70.                         background-color:gray;
  71.                 }
  72.                 </style>
  73.         </head>
  74.         <body>
  75.         <div id="main">
  76.                 <ul>
  77.                         <li>商品生源地</li>
  78.                         <li>商品价格</li>
  79.                         <li>商品类型</li>
  80.                         <li>商品功能</li>
  81.                 </ul>
  82.                 <div class="one"><p>来自法国</p></div>
  83.                 <div class="two"><p>1999元</p></div>
  84.                 <div class="three"><p>手机类</p></div>
  85.                 <div class="four"><p>打电话</p></div>
  86.         </div>
  87.         <script>
  88.         var div=document.getElementById('main').getElementsByTagName('div');
  89.         var li=document.getElementsByTagName('li');
  90.             for( var i=0;i<li.length;i++)
  91.             {
  92.                 li[i].onclick=function()
  93.                 {
  94.                     for( var i=0;i<div.length;i++)
  95.                     {   div[i].style.zIndex=-1;

  97.                     }
  98.                     if(this.innerText=='商品价格')
  99.                     {
  100.                         div[1].style.zIndex=1;
  101.                     }
  102.                }
  103.             }
  104.         </script>
  105.         </body>
  106. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

我设置了的。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-3-31 12:42:39 | 显示全部楼层
如问题代码：

  2.         <script>
  3.         var div=document.getElementById('main').getElementsByTagName('div');
  4.         var li=document.getElementsByTagName('li');
  5.         for(var k=0; k<li.length; k++){
  6.             li[k].onclick=function(){
  7.                 console.log(k);
  8.             }
  9.         }               
  10.         </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. 标记法

  2.        <script>
  3.         var div=document.getElementById('main').getElementsByTagName('div');
  4.         var li=document.getElementsByTagName('li');
  5.         for(var k=0; k<li.length; k++){
  6.             li[k].flag = k; // 添加flag用于存储 k 的值
  7.             li[k].onclick=function(){
  8.                 console.log(this.flag);
  9.             }
  10.         }               
  11.         </script>
复制代码


2.

  2.         <script>
  3.         var div=document.getElementById('main').getElementsByTagName('div');
  4.         var li=document.getElementsByTagName('li');
  5.         for(var k=0; k<li.length; k++){            
  6.             li[k].onclick=(function(j){
  7.                 return function(){
  8.                     console.log(j);
  9.                 }
  10.             })(k);
  11.         }               
  12.         </script>
复制代码


3.

  2.         <script>
  3.         var div=document.getElementById('main').getElementsByTagName('div');
  4.         var li=document.getElementsByTagName('li');
  5.         for(var k=0; k<li.length; k++){            
  6.             (function(j){
  7.                 li[k].onclick= function(){
  8.                     console.log(j);
  9.                 }
  10.             })(k);
  11.         }               
  12.         </script>
复制代码


测试代码：

  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset="utf-8">
  6.                 <title>top栏切换</title>
  7.                 <style>
  8.                 #main{
  9.                         position:relative;
  10.                         width:600px;
  11.                         height:500px;
  12.                         background-color:gray;
  13.                         margin:0 auto;
  14.                 }
  15.                 ul{
  16.                         display:flex;
  17.                         height:50px;
  18.                         background-color:green;
  19.                 }
  20.                 ul li{
  21.                         list-style:none;
  22.                         margin-left:40px;
  23.                         background-color:red;
  24.                         text-align:center;
  25.                         line-height:40px;
  26.                         cursor:pointer;
  27.                 }
  28.                 ul li:hover{
  29.                         background-color:yellow;
  30.                         color:gray;
  31.                 }
  32.                 .one{
  33.                         position:absolute;
  34.                         top:50px;
  35.                         left:0;
  36.                         width:600px;
  37.                         height:500px;
  38.                         background-color:brown;
  39.                 }
  40.                 .two{
  41.                         position:absolute;
  42.                         top:50px;
  43.                         left:0;
  44.                         width:600px;
  45.                         height:500px;
  46.                         background-color:#FFC0CB;
  47.                 }
  48.                 .three{
  49.                         position:absolute;
  50.                         top:50px;
  51.                         left:0;
  52.                         width:600px;
  53.                         height:500px;
  54.                         background-color:deeppink;
  55.                 }
  56.                 .four{
  57.                         position:absolute;
  58.                         top:50px;
  59.                         left:0;
  60.                         width:600px;
  61.                         height:500px;
  62.                         background-color:#808080;
  63.                 }
  64.                 p{
  65.                         width:300px;
  66.                         height:300px;
  67.                         margin-top:100px;
  68.                         margin-left:200px;
  69.                         text-align:center;
  70.                         line-height:300px;
  71.                         background-color:gray;
  72.                 }
  73.                 </style>
  74.         </head>
  75.         <body>
  76.         <div id="main">
  77.                 <ul>
  78.                         <li>商品生源地</li>
  79.                         <li>商品价格</li>
  80.                         <li>商品类型</li>
  81.                         <li>商品功能</li>
  82.                 </ul>
  83.                 <div class="one"><p>来自法国</p></div>
  84.                 <div class="two"><p>1999元</p></div>
  85.                 <div class="three"><p>手机类</p></div>
  86.                 <div class="four"><p>打电话</p></div>
  87.         </div>
  88.         <script>
  89.         var div=document.getElementById('main').getElementsByTagName('div');
  90.         var li=document.getElementsByTagName('li');
  91.         for(var k=0; k<li.length; k++){
  92.             // 问题代码（最终k的值==li.length）
  93.             li[k].onclick=function(){
  94.                 console.log(k);
  95.             }
  96.             
  97.             // 方法1
  98.             //li[k].flag = k;
  99.             //li[k].onclick=function(){
  100.             //    console.log(this.flag);
  101.             //}
  102.             
  103.             // 方法2
  104.             //li[k].onclick=(function(j){
  105.             //    return function(){
  106.             //        console.log(j);
  107.             //    }
  108.             //})(k);
  109.             
  110.             // 方法3
  111.             //(function(j){
  112.             //    li[k].onclick= function(){
  113.             //        console.log(j);
  114.             //    }
  115.             //})(k);
  116.         }               
  117.         </script>
  118.         </body>
  119. </html>

复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-5-5 02:25

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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