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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 如何解决后面this改为li【i】不受作用域的影响顺利更改
返回列表 发新帖
查看: 3299|回复: 8

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

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

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>循环图片小原点点击</title>
  6.                 <style>
  7. *{
  8.         padding:0;
  9.         margin:0;
  10. }
  11.      ul{
  12.             display:flex;
  13.      }

  15.                 li{
  16.                         width:100px;
  17.                         height:100px;
  18.                         background-color:gray;
  19.                 }
  20.                
  21.                 </style>
  22.         </head>
  23.        
  24.         <body>
  25.                 <ul>
  26.                         <li></li>
  27.                         <li></li>
  28.                         <li></li>
  29.                         <li></li>
  30.                         <li></li>
  31.                 </ul>
  32.                 <script>
  33.                 var li=document.getElementsByTagName('li');
  34.                 for(var i=0;i<li.length;i++){
  35.                         li[i].onclick=function(){
  36.                         for(var i=0;i<li.length;i++)
  37.                         {
  38.                                 li[i].style.backgroundColor='';
  39.                         }
  40.                         this.style.backgroundColor='pink';
  41.                 }
  42.                
  43.         }
  44.                 </script>
  45.         </body>
  46. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-3-30 22:30:14
小黄练编程 发表于 2022-3-30 21:47

this 就是 当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。
  1.                 <script>
  2.                 // 1.1. script脚本页面加载便执行，进行相关绑定设置。
  3.                
  4.                 var li=document.getElementsByTagName('li');
  5.                 // 1.2. 页面加载时遍历一遍li标签，进行相关绑定设置。
  6.                 for(var i=0;i<li.length;i++)
  7.                 {
  8.                     // 1.3 给每个li标签绑定事件
  9.                     li[i].onclick=function()
  10.                     {
  11.                         // 2.1 当某个标签点击时，遍历所有li标签进行设置
  12.                         for(var j=0;j<li.length; j++)
  13.                         {
  14.                             li[j].style.backgroundColor='transparent';
  15.                             if(li[j]==this)
  16.                             {
  17.                                 li[j].style.backgroundColor='pink'; // 2.3 到这不是一个意思？
  18.                             }
  19.                         }
  20.                         //this.style.backgroundColor='pink'; // 2.2 这肯定是用this，给当前点击的li进行设置
  21.                     }      
  22.                     
  23.                     // li[i]，也是页面加载时执行，这里不可能是你点击执行
  24.                 }
  25.                 </script>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-30 21:05:17 | 显示全部楼层
  1. var li=document.getElementsByTagName('li');
  2.                 for(var a=0;a<li.length;a++){
  3.                         li[a].onclick=function(){
  4.                         for(var i=0;i<li.length;i++)
  5.                         {
  6.                                 li[i].style.backgroundColor='';
  7.                         }
  8.                         li[a].style.backgroundColor='pink';
  9.                 }
  10.                
  11.         }


  14. 更改了li里的i为a，为啥没用。
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-30 21:07:06 | 显示全部楼层
  1. var li=document.getElementsByTagName('li');
  2.                 for(var a=0;a<li.length;a++){
  3.                         li[a].onclick=function(){
  4.                         for(var i=0;i<li.length;i++)
  5.                         {
  6.                                 li[i].style.backgroundColor='';
  7.                         }
  8.                         li[a].style.backgroundColor='pink';
  9.                 }
  10.                
  11.         }
  12. 更改了li里的i为a，为何没用，如果最后一个函数里找不到a，不是应该往上找吗，然后确定了是绑定了该事件的li也就是this表示的li
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-3-30 21:17:51 | 显示全部楼层
你是想这样吧。
  1.                 var li=document.getElementsByTagName('li');
  2.                 for(var i=0;i<li.length;i++){
  3.                         li[i].onclick=function(){
  4.                         for(var i=0;i<li.length;i++)
  5.                         {
  6.                                 li[i].style.backgroundColor='transparent';
  7.                         }
  8.                         this.style.backgroundColor='pink';
  9.                 }
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-30 21:47:23 | 显示全部楼层
ba21 发表于 2022-3-30 21:17
你是想这样吧。
  1.                 var li=document.getElementsByTagName('li');
  2.                 for(var i=0;i<li.length;i++){
  3.                         li[i].onclick=function(){
  4.                         for(var i=0;i<li.length;i++)
  5.                         {
  6.                                 li[i].style.backgroundColor='transparent';
  7.                         }
  8.                         this.style.backgroundColor='pink';//this改为li【i】;
  9.                 }
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-3-30 22:30:14 | 显示全部楼层    本楼为最佳答案   
小黄练编程 发表于 2022-3-30 21:47

this 就是 当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。
  1.                 <script>
  2.                 // 1.1. script脚本页面加载便执行，进行相关绑定设置。
  3.                
  4.                 var li=document.getElementsByTagName('li');
  5.                 // 1.2. 页面加载时遍历一遍li标签，进行相关绑定设置。
  6.                 for(var i=0;i<li.length;i++)
  7.                 {
  8.                     // 1.3 给每个li标签绑定事件
  9.                     li[i].onclick=function()
  10.                     {
  11.                         // 2.1 当某个标签点击时，遍历所有li标签进行设置
  12.                         for(var j=0;j<li.length; j++)
  13.                         {
  14.                             li[j].style.backgroundColor='transparent';
  15.                             if(li[j]==this)
  16.                             {
  17.                                 li[j].style.backgroundColor='pink'; // 2.3 到这不是一个意思？
  18.                             }
  19.                         }
  20.                         //this.style.backgroundColor='pink'; // 2.2 这肯定是用this，给当前点击的li进行设置
  21.                     }      
  22.                     
  23.                     // li[i]，也是页面加载时执行，这里不可能是你点击执行
  24.                 }
  25.                 </script>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-30 23:31:02 | 显示全部楼层
ba21 发表于 2022-3-30 22:30
this 就是 当前点击li
我是不知道你想干嘛，功能实现了，你还纠结不能用的东西。
  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('ul').getElementsByTagName('li');
  90.             for( var i=0;i<div.length;i++){
  91.                                         li[i].onclick=function(){
  92.                                                         div[i].style.z-index=1;//为何这里出错；
  93.                                                 }
  94.                                         }
  95.         </script>
  96.         </body>
  97. </html>
复制代码

这回还真碰到了这问题了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小黄练编程
 楼主| 发表于 2022-3-30 23:33:11 | 显示全部楼层
小黄练编程 发表于 2022-3-30 23:31
这回还真碰到了这问题了

这回后面那个div【i】可不能用this了，我想实现点击li然后触发事件，那个li被点击然后相应下面的div显示出来.
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-5-5 01:27

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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