javascript - 处理来自多个元素的 Javascript 事件

Question

我想将所有 Javascript 从 HTML 标记移动到单独的文件中，但我仍在与以下问题作斗争:

假设我有一个包含许多行的表(用户表)，对于每个用户，我需要一个按钮来调用函数。现在我对每一行都这样做:

<button onClick='doSomething(a,b,c);'>Edit</button>

我知道我可以使用类属性来告诉 jQuery，所有具有某个类的按钮都应该调用 javascript 函数 doSometing。但是我不知道如何将参数(a，b，c)传递给该函数。正如我所期望的，这些参数必须位于表中的每一行，但是将它们放在哪里呢？

请注意:每行的 a、b、c 都不同。示例:

<tr>
  <td>1</td>
  <td>John</td>
  <td><button onclick="doSomething(1,3,5);">Work!</button></td>
</tr>
<tr>
  <td>2</td>
  <td>Merry</td>
  <td><button onclick="doSomething(2,7,9);">Work!</button></td>
</tr>

谢谢!

Answer 1

一种方法是将值简单地放置在隐藏字段中。

<input type="hidden" class="values" value="1,2,3"/>
<input type="button" class="hiddenInput" value="Do it"/>

其中每个 , 是函数的一个值。在你的 jQuery 单击中你可以使用.siblings(.values)

$(".hiddenInput").click(function() {
    var values = $(this).siblings(".values").val().split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    DoSomething(a, b, c);
});

现在，如果您使用jQuery 1.4.3 或更高版本，jQuery 将自动解析data-* 属性。事情变得容易多了。

<input type="button" class="dataAttr" data-values='{"a": "1", "b": "2", "c": "3"}' value="Do it"/>

这允许您在此 data-* 属性中存储一个值甚至一个复杂的 json 对象，并且 jQuery 将自动解析它。

$(".dataAttr").click(function() {
    var values = $(this).data("values");
    DoSomething(values.a, values.b, values.c);
});

jsfiddle 上的代码示例