jquery - 将参数传递给函数

Question

这似乎是一个简单的问题,但我找不到一个简单的答案.所以我先从一个简单的例子开始.

<a href="#" onclick="showmsg('bark')">dog</a>
<a href="#" onclick="showmsg('meow')">cat</a>

这是一个javascript函数...

function showmsg(msg) {
  alert(msg);
}

在上面的示例中,可以添加附加内容(html行)而不会破坏行为(javascript).每行html都将自己的参数传递给javascript,告诉它应该显示什么消息.

如果html改为......

<a href="#" class="showmsg">dog</a>
<a href="#" class="showmsg">cat</a>

然后我如何编写一个知道单击哪一行html的jquery函数？换一种说法...

如何将参数传递给jquery函数？

Answer 1

在这种情况下,我会使用一个data-属性,如下所示:

<a href="#" class="showmsg" data-sound="bark">dog</a>
<a href="#" class="showmsg" data-sound="meow">cat</a>

你的click处理程序可以获取它,如下所示:

$("a.showmsg").click(function() {
  alert($(this).attr("data-sound"));
});

或者在jQuery 1.4.3+中

$("a.showmsg").click(function() {
  alert($(this).data("sound"));
});

你可以在这里测试一下.

根据评论澄清:这在HTML5中非常有效,在HTML4中它无效,但验证器是您将拥有的唯一问题,它将在每个HTML4浏览器中运行.如果它在HTML4中没有丢失,那么它就不会被添加到HTML5中... 无论是否验证,我个人都会使用它.

Answer 2

如果我正确理解你的问题，你可以这样做：

<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);
});