zoukankan      html  css  js  c++  java
  • js闭包for循环只执行最后一个值得解决方法

    <style>
    li{
    list-style: none;40px;height: 40px;text-align:center;line-height: 40px;cursor: pointer;
    }
    </style>
    
    html代码:
    <ul id="uls">
        <li style="background:#aaa">0</li>
        <li style="background:#bbb">1</li>
        <li style="background:#ccc">2</li>
        <li style="background:#ddd">3</li>
    </ul>
    
    
    //这样写的话每次弹出都是最后一个值
    // var lis=document.getElementsByTagName('li');
    // for (var i = 0; i <=lis.length; i++) {
    // lis[i].onclick = function(){
    // alert(i);
    // }
    // };
    
    
    使用闭包方法解决
    
    //解决方法一:
    var lis=document.getElementsByTagName('li');
    for (var i = 0; i <=lis.length; i++) {
        (function(i){
            lis[i].onclick = function(){
                alert(i);
            }
        })(i);
    };
    
    //解决方法二:
    var lis=document.getElementsByTagName('li');
    for (var i = 0; i <=lis.length; i++) {
        lis[i].onclick = function(n){
            return function(){
                alert(n);
            }
        }(i);
    };
    
    //解决方法三(jquery):
    $("ul li").click(function(){
        var index = $(this).index(); //获取索引下标 也从0开始
        alert($(this).html());
    });
  • 相关阅读:
    TP框架实现分页及条件查询
    tp框架连贯操作
    php查询
    php修改数据
    php增加数据处理
    php删除数据
    php怎么访问数据库
    php查询
    克隆及加载类
    php静态成员和接口
  • 原文地址:https://www.cnblogs.com/dexin/p/6375079.html
Copyright © 2011-2022 走看看