这似乎是一个简单的问题,但我找不到一个简单的答案.所以我先从一个简单的例子开始.
<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函数?
解决方法
在这种情况下,我会使用
data-
attribute,如下所示:
<a href="#" class="showmsg" data-sound="bark">dog</a> <a href="#" class="showmsg" data-sound="meow">cat</a>
你的点击处理程序可以获取它,如下所示:
$("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中……无论是否验证,我都会亲自使用它.