javascript jquery - 将参数传递给函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4154457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery - passing parameters to functions
提问by Audi
This seems like a simple question, but I can't find a simple answer. So I'll start by giving a simple example.
这似乎是一个简单的问题，但我找不到简单的答案。所以我先举一个简单的例子。
<a href="#" onclick="showmsg('bark')">dog</a>
<a href="#" onclick="showmsg('meow')">cat</a>
And here's a javascript function...
这是一个javascript函数......
function showmsg(msg) {
alert(msg);
}
In the above example, additional content (lines of html) may be added without breaking the behavior (the javascript). Each line of html passes its own parameter to the javascript to tell it what message it should display.
在上面的示例中，可以在不破坏行为（javascript）的情况下添加附加内容（html 行）。html 的每一行都将它自己的参数传递给 javascript，以告诉它应该显示什么消息。
If the html is changed to...
如果将 html 更改为...
<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>
Then how do I write a jquery function that knows which line of html was clicked? In other words...
那么如何编写一个知道点击了哪一行 html 的 jquery 函数呢？换句话说...
How do I pass a parameter to a jquery function?
如何将参数传递给 jquery 函数？
回答by Nick Craver
In this case I'd use a data-attribute, like this:
在这种情况下，我将使用一个data-属性，如下所示：
<a href="#" class="showmsg" data-sound="bark">dog</a>
<a href="#" class="showmsg" data-sound="meow">cat</a>
And your clickhandler can fetch it, like this:
您的click处理程序可以获取它，如下所示：
$("a.showmsg").click(function() {
alert($(this).attr("data-sound"));
});
Or in jQuery 1.4.3+
或者在 jQuery 1.4.3+
$("a.showmsg").click(function() {
alert($(this).data("sound"));
});
To clarify based on comments:This is perfectly valid in HTML5, in HTML4 it's not valid, but the validator is the only issue you'll have, it'll work in every HTML4 browser. If it wasn't missing in HTML4, it wouldn't have been added in HTML5...I'd personallyuse it whether it validates or not.
根据评论澄清：这在 HTML5 中完全有效，在 HTML4 中它无效，但验证器是您将遇到的唯一问题，它适用于每个 HTML4 浏览器。如果它在 HTML4 中没有丢失，它就不会被添加到 HTML5 中......无论它是否验证，我都会亲自使用它。
回答by rahul
What you can do is to set a custom attribute that contains the value that needs to be pased to the function. Something like
您可以做的是设置一个自定义属性，其中包含需要传递给函数的值。就像是
<a href="#" class="showmsg" data-attr="bark">dog</a><br>
<a href="#" class="showmsg" data-attr="meow">cat</a><br>
$("a.showmsg").click(function(){
var attr = $(this).attr("data-attr");
return false;
});
回答by Andy E
The data method is a good way to go. If it were me, though, I'd prefer not to have any HTML4 validation errors by defining the sounds in an object map, then pass the text to that map. For instance:
数据方法是一个很好的方法。但是，如果是我，我更愿意通过在对象映射中定义声音来避免任何 HTML4 验证错误，然后将文本传递给该映射。例如：
<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>
var sounds = {
dog: "woof",
cat: "meow",
horse: "neigh",
etc: "etc"
};
$("a.showmsg").click(function() {
alert(sounds[$(this).text()] || "");
});Working example: http://jsfiddle.net/AndyE/Q9yWU/
回答by DANDYYeah
if you really want to use this HTML:
如果你真的想使用这个 HTML：
<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>
Just write this:
只写这个：
// for dog
$('.showmsg:first-child').click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
// for cat
$('.showmsg:last-child').click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
or
或者
$(".showmsg:contains('dog')").click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
$(".showmsg:contains('cat')").click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
and also
并且
$("a:contains('dog')").click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
$("a:contains('cat')").click(function() {
// some crazy code here ..
return false; // for prevent open href link
});
回答by Michel
If I understood your question correct you can do it like this:
如果我理解你的问题是正确的，你可以这样做：
<a href="#" class="showmsg" alt="bark">dog</a>
<a href="#" class="showmsg" alt="meow">cat</a>
$(".showmsg").click(function(){
var msg = $(this).attr("alt");
alert(msg);
});
回答by Scott
Firstly to allow you to show code place the code in your post, select it and press ctrl+k to put in code block.
首先，为了让您显示代码，请将代码放在您的帖子中，选择它并按 ctrl+k 放入代码块。
Back to question in jquery you use:
回到你使用的 jquery 中的问题：
$("a.showmsg").click(function() {
alert($(this).text());
});
You can use "this" to find out what has been clicked
您可以使用“this”来找出被点击的内容
回答by Cristan
With the on function(or the click functionstarting at jQuery 1.4.3), you can pass event data in a really nice way:
使用on 函数（或从 jQuery 1.4.3 开始的 click 函数），您可以以一种非常好的方式传递事件数据：
<button id="clickable0">Clickable 0</button>
<button id="clickable1">Clickable 1</button>
<script type="text/javascript">
for(var i = 0; i < 2; i++)
{
$("#clickable"+i).on('click', {item: i}, function(event){
alert("clicked on item "+ event.data.item);
});
}
</script>
The main advantage is that the value in event.data.item will be the same as the parameter ("i" in this case) was at the time the onClick was created. This is handy, because in this case, you won't have to worry about the value of i changing while the for loop is running.
主要优点是 event.data.item 中的值将与创建 onClick 时的参数（在本例中为“i”）相同。这很方便，因为在这种情况下，您不必担心在 for 循环运行时 i 的值会发生变化。
