长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

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

  • 时间:2016-10-26 10:22
  • 发布:长沙web培训
  • 来源:博客园

长沙Web前端培训机构的老师发现近期,面试我们总会遇到这样一个面试题:

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

代码如下:(简单些)

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+"\n"+"文本内容是:"+this.innerHTML);   // \n换行  索引值从0开始

}

}

方法二:(常用)

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

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

(function(n){

itemli[i].onclick = function(){

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

}

})(i)

}

或者or:

for(var i = 0; i<itemli.length; 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换行

})

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:KnockoutJS 3.X API表单绑定:value绑定
下一篇:position属性absolute与relative详解

马上预约三天免费体验课

姓名:

电话:

javascrip的数据类型和变量

ajax前后端数据交互

javascipt的函数表达式

菜单展开关闭

选择城市和中心
贵州省

广西省

海南省