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- attribute，如下所示：

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

You can test it out here

根据评论澄清：这在HTML5中完全有效，在HTML4中它不是有效，但验证器是你唯一的问题，它是' ll适用于每个HTML4浏览器。如果在HTML4中没有丢失，它将不会在HTML5中添加...我个人使用它，无论它是否有效。

Answer 2

您可以做的是设置一个自定义属性，其中包含需要添加到该函数的值。像

这样的东西

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

Answer 3

数据方法是一个很好的方法。但是，如果是我，我宁愿不通过定义对象图中的声音来获得任何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()] || "");
});

工作示例：http://jsfiddle.net/AndyE/Q9yWU/

Answer 4

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

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

Answer 5

首先允许您显示代码将代码放在帖子中，选择它并按ctrl + k放入代码块。

回到你使用的jquery中的问题：

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

您可以使用“this”查找已点击的内容

Answer 6

如果你真的想使用这个HTML：

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

请写下：

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

或

$(".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
});

以及

$("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
});

Answer 7

使用the on function（或the click function从jQuery 1.4.3开始），您可以以非常好的方式传递事件数据：

<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>

主要优点是event.data.item中的值与创建onClick时的参数（本例中为“i”）相同。这很方便，因为在这种情况下，你不必担心在for循环运行时我改变的值。

jquery - 将参数传递给函数

7 个答案: