首页 > 代码库 > 关于for循环传参给内部click事件函数的问题
关于for循环传参给内部click事件函数的问题
今天处理table表格下的<tr>中的<td>标签中几个按钮点击事件,三个按钮分别要实现置顶,取消置顶,删除操作。其中EditRequest()函数是写好的ajax方法,一开始我是这么写的:
$(‘.cancel-top‘).click(function(){ var pid = $(this).parents(‘tr‘).find(".pid").text(); if(confirm("确定要取消置顶吗?")){ EditRequest(pid,‘not_top‘); }});$(‘.to-top‘).click(function(){ var pid = $(this).parents(‘tr‘).find(".pid").text(); if(confirm("确定要置顶此主题帖吗?")){ EditRequest(pid,‘top‘); }});$(‘.del-post‘).click(function(){ var pid = $(this).parents(‘tr‘).find(".pid").text(); var _this = $(this); if(confirm("确定要删除此主题帖吗?")){ EditRequest(pid,‘del‘,_this); }});
那么问题来了,好像三个事件函数都差不多,这样写的话产生了大量重复代码,并不觉得它足够优雅,于是决定改写它:
1 var config = [ 2 {‘classNm‘:‘cancel-top‘,‘msg‘:‘取消置顶‘,‘type‘:‘not_top‘}, 3 {‘classNm‘:‘to-top‘,‘msg‘:‘置顶此帖‘,‘type‘:‘top‘}, 4 {‘classNm‘:‘del-post‘,‘msg‘:‘删除此帖‘,‘type‘:‘del‘}, 5 ]; 6 for(var i=0;i<3;i++){ 7 $(‘.‘+config[i].classNm).click({index:i},function(){ 8 var _this = $(this), 9 pid = $(this).parents(‘tr‘).find(".pid").text();10 if(confirm("确定要"+config[i].msg+"吗?")){11 EditRequest(pid,config[i].type,_this);12 }13 })14 };
显然click事件处理函数内部是获取的i值总是3,此时我想大声呵呵。说来惭愧,我并没有深入理解javascript中的作用域问题。脑补了一下后,将for语句改写如下:
1 for(var i=0;i<3;i++){ 2 (function(i){ 3 $(‘.‘+config[i].classNm).click(function(){ 4 var _this = $(this), 5 pid = $(this).parents(‘tr‘).find(".pid").text(); 6 if(confirm("确定要"+config[i].msg+"吗?")){ 7 EditRequest(pid,config[i].type,_this); 8 } 9 })10 })(i);11 };
使用闭包就可以巧妙地解决问题,但是总觉得jQuery有自己的办法而不是使用难以理解的麻烦的闭包。于是又脑补了一下后,改写如下:
1 for(var i=0;i<3;i++){2 $(‘.‘+config[i].classNm).click({index:i},function(e){3 var _this = $(this),4 pid = $(this).parents(‘tr‘).find(".pid").text();5 if(confirm("确定要"+config[e.data.index].msg+"吗?")){6 EditRequest(pid,config[e.data.index].type,_this);7 }8 })9 };
jQuery中的事件处理函数都可以自带event参数的,往往都是默认的一些参数。当然也可以手动添加一些参数到它的data属性里面,正是利用了这一点达到了我的目的。突然就精简了,是不是又进步了一点点了呢?!哈哈哈…
关于for循环传参给内部click事件函数的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。