• 关于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(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属性里面,正是利用了这一点达到了我的目的。突然就精简了,是不是又进步了一点点了呢?!哈哈哈…

  • 相关阅读:
    SQL: 返回刚插入记录的ID 及 output 更新记录时得到更新记录的ID值 .
    asp.net 用伪静态修改webconfig配置文件 .
    Asp.Net : 捕捉和记录网站中出现的所有未处理错误,抛出详细的页面来源和访问ip,调用的接口方法及异常实例(记事本日志,系统日志及数据库日志)
    js闭包(转载) (jquery ajax 异步 多循环运用 )
    c# enum 枚举名称和ID 互换获取.................
    WCF :服务开发与调用的完整示例
    关于DataSet 、 DataTable 、 ArrayList 、 IList 、Array
    Expression Tree不完全入门
    WF4 Beta2:IExecutionProperty的使用
    Groovy 1.8.9, 2.0.7 和 2.1.1 发布
  • 原文地址:https://www.cnblogs.com/flappyCoder/p/4106109.html
Copyright © 2020-2023  润新知