zoukankan      html  css  js  c++  java
  • JavaScript点击li显示索引

      有一个ul,ul里面有几个li,如果需要点击li打印出此li对应的索引号该怎么做呢?

      最开始的想法是:

    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
        <li>冬</li>
    </ul>
    <script type="text/javascript">
    	var lis=document.getElementsByTagName("li");
    	for (var i = 0; i < lis.length; i++) {
    		lis[i].onclick=function(){
    			console.log(i);
    		}
    	};
    </script>
    

       结果发现点击春、夏、秋、冬打印出来的都是4。

      原因分析:上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。

      修改代码如下:

    for(var i=0;i<li.length;i++){
        (function(x){
            li[x].onclick=function(){
    	  console.log(x);
    	}
        })(i);
    }    
    

       如此利用闭包发现可以达到需求,i作为参数传递给x,i不同,选定的li不同,从而绑定的click函数也不同。

  • 相关阅读:
    vue-router基础使用
    Vue插槽
    Vue组件通信
    小程序自定义头部导航栏
    css日常积累
    移动端的无缝轮播图片
    vue的h5开发中,将页面保存为图片
    vue-webpack打包问题
    洛谷P1341 最受欢迎的奶牛
    Tarjan 算法详解
  • 原文地址:https://www.cnblogs.com/iagw/p/6385489.html
Copyright © 2011-2022 走看看