循环绑定机制

js循环给li绑定事件实现 点击li弹出其索引值 和内容

html代码

    香蕉

    苹果

    菠萝

    猕猴桃

    芒果

    方法一:

    var itemli = document.getElementsByTagName("li");

    for(var i = 0; i

    itemli[i].index = i; //给每个li定义一个属性索引值,赋

    itemli[i].onclick = function(){

    alert("下标索引值为:"+this.index+"\n"+"文本内容是:"+this.innerHTML);    //  \n换行   索引值从0开始

    }

    }

    方法二:(常用)

    var itemli = document.getElementsByTagName("li");

    for(var i = 0; i

    (function(n){

    itemli[i].onclick = function(){

    alert("下标索引值为:"+n+"\n"+"文本内容是:"+itemli[n].innerHTML);    //  \n换行   索引值从0开始

    }

    })(i)

    }

    或者or:

    for(var i = 0; i

    itemli[i].onclick = function(n){

    return function(){

    alert("下标索引值为:"+n+"\n"+"文本内容是:"+itemli[n].innerHTML);    //  \n换行   索引值从0开始

    }

    }(i)

    }

    方法三:jQuery(更简单)

    $("ul li").click(function(){

    var item = $(this).index();  //获取索引下标 也从0开始

    var textword = $(this).text();  //文本内容

    alert("下标索引值为:" + item +"\n"+ "文本内容是:"+textword); //  \n换行

    })

    推荐阅读更多精彩内容

    • [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d...
      S_Lance阅读 3,136评论 1 4
    • 目录 一、数据搜索平台 二、问卷调查工具 三、网址缩短工具 四、二维码处理美化工具 五、图片视频处理工具...
      简小猫阅读 116评论 0 0
    • 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前...
      Midaoi阅读 3,397评论 6 103
    • 背景:又换云服务器了...又要装系统了...不过之前搞过许多,也就没装过web服务器而已。考虑到之前用的都是Ngi...
      dovebottle阅读 1,546评论 0 1
    • 在这个世界上有些人很聪明,有些人很愚笨,我说的笨不是说脑子笨什么都不知道的那种,而是对有些事情并没有那么多的想法的...
      怕咯来咯魔龙阅读 48评论 0 0