Question

我想将所有Javascript从HTML标记转移到单独的文件中，但我仍然在与以下内容抗争：

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

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

我知道我可以使用class属性来告诉例如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上有趣的文章。

P.S。这被称为anonymous function。

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

4 个答案: