• 这是第一个li
  • 这是第二个li
  • 这是第三个li
  • 解答一:bind,将当前匿名函数指向this,将i当参数传入var init = function(){var obj = document.getElementById('text" />
    当前位置:首页 > 日记 > 正文

    分享一道关于闭包、bind和this的面试题

    分享一道关于闭包、bind和this的面试题

    要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index

    <ul id="text"> <li>这是第一个li</li> <li>这是第二个li</li> <li>这是第三个li</li></ul>

    解答一:bind,将当前匿名函数指向this,将i当参数传入

    var init = function(){var obj = document.getElementById('text');for(var i=0;i<obj.children.length;i++){ obj.children[i].addEventListener('click',function(i){ alert(i) }.bind(this,i))}}init();

    解答二:闭包

    var init = function(){var lis=document.querySelectorAll("#text li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=(function(i){  return function(){   alert(i);  }; })(i) }}init();

    解答三:最笨的方法,匹配

    var init = function(){ var obj = document.getElementById('text'); for(var i=0;i<obj.children.length;i++){ obj.children[i].addEventListener('click',function(item){ var self = item.target; for(var j=0;j<obj.children.length;j++){ if(self == obj.children[j]){  alert(j); } } }) }}init();

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

    相关文章

    如何将PPT字母设计成霓虹灯效果

    如何将PPT字母设计成霓虹灯效果

    霓虹灯,字母,效果,如何将,电脑软件,  PPT的字体可以设计很多种效果,同样,我们也可以给字母设计一些好看的效果出来。以下是小编为您带来的关于将PPT字母设计成霓虹灯效果,希望对您有所帮助。将PPT字母设计成霓虹灯效果具体操作如下:先设置PPT…

    浅谈键盘上回车按钮的js触发事件

    浅谈键盘上回车按钮的js触发事件

    事件,键盘,浅谈,按钮,电脑软件,input 的回车触发事件。简单,就当做个笔记咯。$("#querySearcher").live("keyup", function (e) { if (e.keyCode == 13) { xxxxxx(); } });以上这篇浅谈键盘上回车按钮的js触发事件就是小编…

    ppt2010怎么打包ppt2010文稿打包的

    ppt2010怎么打包ppt2010文稿打包的

    步骤,方法,教程,文稿,电脑软件,  所谓打包,指的就是将独立的已综合起来共同使用的单个或多个文件,集成在一起,生成一种独立于运行环境的文件。将PPT打包能解决运行环境的限制和文件损坏或无法调用的不可预料的问题,那么下面小编就教你ppt2010…

    Photoshop创意合成沙发上的美女人

    Photoshop创意合成沙发上的美女人

    创意,人像,思路,美女,沙发上,本教程主要使用Photoshop详解沙发人像后期创意合成教程,这是国外大神Aaron Nace的一个教程,大家可以看看这个教程的后期调整思路,整体的创意非常的不错,在这里和大家一起学习。效果图:处理画面背景部分抢眼的东西,目…

    React根据宽度自适应高度的示例代

    React根据宽度自适应高度的示例代

    示例代码,自适应高度,宽度,电脑软件,React,有时对于响应式布局,我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化,传统是用jQuery实现。而在React中无需依赖于JQuery,实现相对比较简单,只要在DidMount后更改width即可Try on Codepe…

    JS 60秒后重新发送验证码的实例讲

    JS 60秒后重新发送验证码的实例讲

    验证码,实例,电脑软件,JS,废话不多说,直接上代码//settime($("#getPhoneCode"),60);function settime($obj, time) { if (time == 0) { $obj.attr("disabled", false); $obj.css("background", "#f38401").css("cursor", …

    excel次方公式的使用教程详解

    excel次方公式的使用教程详解

    使用教程,次方,公式,详解,电脑软件,  在Excel录入完数据后,很多时候需要把数据的值进行计算,需要用到次方公式,下面是小编带来的关于的内容,欢迎阅读!excel次方公式的使用教程11:SQRT函数如果要在Excel求某个数的平方根,可以使用SQRT函数返回其…

    如何在ppt中插入excel表格图表

    如何在ppt中插入excel表格图表

    图表,表格,如何在,电脑软件,excel,  PPT的制作中如果需要数据的展示,图表的使用无疑比单纯的数据更加直观,在Powerpoint中插入图标并且快速实现图表的设置编辑。以下是小编为您带来的关于ppt插入excel图表,希望对您有所帮助。ppt插入excel图…

    基于JavaScript实现淘宝商品广告效

    基于JavaScript实现淘宝商品广告效

    淘宝,商品,效果,广告,电脑软件,本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下CSS部分:ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px…

    基于 Bootstrap Datetimepicker 联

    基于 Bootstrap Datetimepicker 联

    电脑软件,Bootstrap,Datetimepicker,先看一下 层级联动的案例先选择前面时间后 后面的时间不要超过前面的时间先选择后面的时间后,前面的时间不要少于后面的时间下面看封装代码function initDateTimePicker(startTime, endTime, timeFormat…

    ps怎么绘制一副电路板图特效?

    ps怎么绘制一副电路板图特效?

    绘制,电路板,特效,电脑软件,ps,ps具有强大的图片编辑功能,这次小编就为大家分享一下如何用ps制作电路板特效软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先。打开ps,然后新建一个文档。大小为1366…

    jquery select插件异步实时搜索实

    jquery select插件异步实时搜索实

    实时搜索,插件,异步,实例代码,电脑软件,一、先看看效果。二、做此插件的原因。1.数据量过大(几千、几万条),无法一次性全部加载。2.现有插件各不相同,无法满足功能需求。3.美观性,可控性不足。三、如何使用。1.html和js<select id="unit"></se…