处理来自许多元素的 Javascript 事件

Question

我想将 HTML 标记中的所有 Javascript 移动到单独的文件中，但我仍在努力解决以下问题：

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

<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上的代码示例

Answer 2

如果您不在 HTML 5 上，您可以在页面中使用隐藏的表单字段，然后将其读出以获取您想要的参数..

例如：

<button id="something-1" class="something"/>
 <input type="hidden" id="something-1-param-a" value="1"/>
 <input type="hidden" id="something-1-param-b" value="42"/>
 <input type="hidden" id="something-1-param-c"  value="1337"/>

<button id="something-2" class="something"/>
 <input type="hidden" id="something-2-param-a" value="0"/>
 <input type="hidden" id="something-2-param-b" value="10"/>
 <input type="hidden" id="something-2-param-c" value="100"/>

在你的外部 JS 或脚本块中：

<script type="text/javascript">
$(function(){
 $(".something").click(function(e){
   var id = $(this).attr('id');
   var a = $("#"+id+"-param-a").val();
   var b = $("#"+id+"-param-b").val();
   var c = $("#"+id+"-param-c").val();
   doSomething(a,b,c);
 });
});</script>

（如果你可以使用 HMTML5，你可以把它们放在 html 数据属性中）

Answer 3

这让很多试图转向不引人注目的 JavaScript 的人感到困惑，但这是一个重要的概念：

让您的事件处理程序从 DOM 中提取数据。

其他一些答案已经建议使用HTML5 data-* attributes 或隐藏字段。如果您不希望用户看到数据，这些都是不错的选择。

不过，您想要的数据通常已经在文档的某个地方使用。看这个例子：

<table id="songs">
<tr><th>Song</th><th>Artist</th><th></th></tr>
<tr>
    <td><a href="/music/nobodys-fool.mp3">Nobody's Fool</a></td>
    <td>Cinderella</td>
    <td><button class="play">play</button></td>
</tr>
<tr>
    <td><a href="/music/every-rose.mp3">Every Rose Has Its Thorn</a></td>
    <td>Poison</td>
    <td><button class="play">play</button></td>
</tr>
<table>
<script src="jquery.js"></script>
<script>
function playSong(filename, songname, artist) {
    // some code in here that loads the song into a player widget
}

$('#songs button.play').bind('click', function(ev){
  // find the row we belong to
    var songRow = $(this).parent('tr');
    // the file name is in the href
    var file = songRow.find('a').attr('href');
    // the song name is inside the a element
    var song = songRow.find('a').text();
    // the artist is in the second td in the row
    // (index 1 because arrays are numbered from 0)
    var artist = songRow.find('td')[1].text();

    playSong(file, song, artist);
});
</script>

Answer 4

有多种方法可以做你想做的事，但最简单的是

$('button').click(function(){doSomethind(a,b,c);};

另外，请阅读ways to call a function in javascript 上这篇有趣的文章。

附：这称为anonymous function。