Question

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

修改
上下文：我有一个表格，显示一个事件的名单。每行都有一个“删除”按钮。将recordId传递给delete-handler的更好方法是什么？

$('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>

每个选项的优缺点是什么？

注意：我使用a.button作为自定义的CSS样式按钮，不表现为链接。

修改
如果你能论证所提供的替代方案的优点，我也会感谢替代解决方案。

Answer 1

将记录ID存储为元素本身的属性，但不建议使用以奇怪格式存储的元数据插件，我建议您使用也向后兼容的HTML5数据属性。

一行看起来像：

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

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

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

它与使用元数据插件相当，但它不会重载class属性。这不需要额外的插件。它使用单个处理程序，正如元数据插件所做的那样，它对大型数据集具有高性能。

由于同样的原因，内联onclick处理程序很糟糕。每行创建一个新的处理程序。它降低了灵活性，通常是一种不好的做法。

Answer 2

我会采用你的第二种方法 - 这是最简单的，它没有任何问题。

Answer 3

$('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>

Answer 4

编辑：
听起来你正在动态地为这些“按钮”分配数据。你最好使用jQuery的.data()方法将数据分配给按钮，然后从那里获取数据。我已经更新了我的示例代码。

<击> 如果每种类型的按钮执行不同的操作，则为每种类型的按钮使用不同的处理程序：

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

~~$（'a.button.no'）。click（function（e）{ //东西 }）;~~

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

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

4 个答案: