代码之家  ›  专栏  ›  技术社区  ›  THX-1138

JavaScript:将参数传递给onclick处理程序

  •  3
  • THX-1138  · 技术社区  · 14 年前

    我需要将额外的参数传递给onclick处理程序。我无法决定哪种方式“更好”:

    编辑:
    上下文:我有一个表,显示一个事件的花名册。每行都有一个“删除”按钮。向delete处理程序传递recordId的更好方法是什么?

    $('a.button').click(function() {
        var recordId = $(this).metadata().recordId;
        console.log(recordId);
    });
    ...
    <tr>...<a class='{recordId:1} button'>delete</a></tr>
    <tr>...<a class='{recordId:2} button'>delete</a></tr>
    

    function delete(recordId) {
        console.log(recordId);
    }
    ...
    <tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr>
    <tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr>
    

    每种选择的优缺点是什么?

    编辑:
    如果你能论证所提供的替代方案的优点,我也会很感激。

    4 回复  |  直到 14 年前
        1
  •  5
  •   Anurag    14 年前

    将记录id存储为元素本身的一个属性,但是我建议您使用HTML5的数据属性,而不是使用元数据插件以一种奇怪的格式存储它。

    <tr> .. <a data-id="1">delete</a> .. </tr>
    

    在处理程序中,检索属性值并对其执行操作

    function deleteRecord() {
        var rowId = $(this).attr('data-id');
        ...
    }
    

    class 属性。不需要额外的插件。它只使用一个处理程序,就像元数据插件一样,这对于大型数据集是有效的。

    onclick 因为同样的原因,处理者是不好的。每行创建一个新的处理程序。它减少了灵活性,通常是一种不好的做法。

        2
  •  1
  •   serg    14 年前

        3
  •  0
  •   ovais.tariq    14 年前
    $('a.button').click(function() {
        var classes = $(this).attr('class').split(' ');
        var option;
    
        for( var i in classes )
        {
          if( classes[i].indexOf( 'option' ) != -1 )
          {
            option = classes[i].substr( 6 );
            break;
          }
        }
    
        console.log( option );
    });
    ...
    <a class='option-yes button'>Yes</a>    
    <a class='option-no button'>No</a>
    
        4
  •  0
  •   ntownsend    14 年前

    编辑:
    听起来像是在动态地为这些“按钮”分配数据。最好使用jQuery的 .data() 方法,然后从中获取数据。我已经更新了示例代码。

    $('a.button').click(function (e) {
      // Stuff with $(this).data().recordId
    });
    

    美元('a。button.no')。单击(函数(e){ //什么

    ...
    <a class="button yes">Yes</a>
    <a class="button no">No</a>