星空网 > 软件开发 > Java

巧用javascript对象属性,向事件绑定的匿名函数内传递循环控制变量的值

遇到一个需要向匿名函数传递循环控制变量的问题,我受到园子里这篇文章的启发【笔记】js获取当前点击元素的索引,解决了这个问题。现在把代码贴出来,以防止自己忘记。

 1  if ($('#labModal').length > 0) { 2   var screenWidth = window.screen.width; 3   var equipList = document.getElementsByClassName('equip-item'); 4  5   for (i = 0; i < equipList.length; i += 1) { 6    equipList[i].index = i; // 给equipList[i]对象添加一个index属性并将i赋值给它 7    equipList[i].onclick = function() { 8     $('.item').removeClass('active'); 9     $('.item').eq(this.index).addClass('active'); // 在匿名函数内部引用index属性10     if (screenWidth > 768) {11      $('#labModal').modal();12     }13    }14   }15  }

注意代码中的第6行:给equipList[i]对象添加了一个index属性,并将变量i赋值给它,这样equipList[0]的index值为0,equipList[1]的index值为1,equipList[2]的index值为2,......,equipList[i]的index值为i,这样就实现了我要的效果。然后在equipList[i]对象onclick绑定的函数中就可以直接用这个值了:this.index。不然的话,还有什么其他方法将变量i的值传递到这个匿名函数中来实现上面的效果呢?

好吧,其实问题并不在“将循环控制变量i的值传递到匿名函数”中来,上面代码的关键在于,给每一个equipList数组中的元素,也就是equip-item对象节点添加了一个index属性,并给这个属性分别赋值(比如,从0到16),最终的目的其实是为了获取$('.item')[i]这个元素,然后再对其进行操作。

javascript真是灵活,在javascript中一切皆对象,而对象就是属性的集合。

上面的for语句其实有些问题,最好这么写:

1 for (var i = 0; i < equipList.length; i += 1) {2  // other codes3 }

而ES6语法中,则引入了const和let,可以将上面的var换为let。至于为什么要加上var,还有const和let与var相比又有什么区别,等到有时间再研究下。

 

参考:

1,【笔记】js获取当前点击元素的索引




原标题:巧用javascript对象属性,向事件绑定的匿名函数内传递循环控制变量的值

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

速卖通海外618开卖首日,商家再迎爆单潮:https://www.ikjzd.com/articles/1668876876652421121
出海品牌直播带货:虚拟主播的优势与挑战,以及未来趋势揭秘:https://www.ikjzd.com/articles/1668891588492468226
速来!美国《消费者告知法案》对亚马逊卖家有什么影响?:https://www.ikjzd.com/articles/1668898321457684482
菲律宾月销售额高达31w+的产品竟然是这个!:https://www.ikjzd.com/articles/1669159910291828737
印尼公司注册优势、条件以及流程:https://www.ikjzd.com/articles/1669162310725562370
独立站优秀案例分析:鞋履品牌Baretraps是如何俘获消费者“芳心”的?:https://www.ikjzd.com/articles/1669167032777863170
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流