zoukankan      html  css  js  c++  java
  • js循环给li绑定事件实现 点击li弹出其索引值 和内容

    近期,面试我们总会遇到这样一个面试题:

    现在网上答案很多苟同,但是我还是想在重复的述说一遍,俗话说:好记忆不如烂笔头, 虽然常见,简单,反复出现,总之,在简单的多写写记忆还是很深刻的,即使忘了,也能拿出来翻翻。

    代码如下:(简单些)

    html代码

      <ul>

      <li>香蕉</li>

      <li>苹果</li>

         <li>菠萝</li>

      <li>猕猴桃</li>

      <li>芒果</li>

      </ul>

    方法一:

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

       for(var i = 0; i<itemli.length; i++){

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

        itemli[i].onclick = function(){

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

        }

       }

    方法二:(常用)

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

    for(var i = 0; i<itemli.length; i++){

       (function(n){

              itemli[i].onclick = function(){

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

         }

        })(i)

       }

    或者or:

    for(var i = 0; i<itemli.length; i++){
            itemli[i].onclick = function(n){
            return function(){
                    alert("下标索引值为:"+n+" "+"文本内容是:"+itemli[n].innerHTML);    //  换行   索引值从0开始
                }
          }(i)
        }

    方法三:jQuery(更简单)

    $("ul li").click(function(){
            var item = $(this).index();  //获取索引下标 也从0开始
            var textword = $(this).text();  //文本内容
            alert("下标索引值为:" + item +" "+ "文本内容是:"+textword); //  换行
        })

    希望对你有帮助, 整理一下。

  • 相关阅读:
    【驾考】科目三上路笔记——3号线
    【操作系统】30天自制操作系统——第5天
    【驾考】科目三笔记
    【操作系统】30天自制操作系统——第4天
    【操作系统】 DOS命令windows批处理batch编程——第一章
    【操作系统】30天自制操作系统——第3天
    【操作系统】30天自制操作系统——第2天
    【操作系统】30天自制操作系统——第1天
    【机器学习】Pandas库练习-获取yahoo金融苹果公司的股票数据
    SOS团队介绍
  • 原文地址:https://www.cnblogs.com/wuchuanlong/p/5945286.html
Copyright © 2011-2022 走看看