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

如果你真的想使用這個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 5

如果我理解你的問題是正確的，你可以這樣做：

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

首先，允許您顯示代碼將代碼放在帖子中，選擇它並按ctrl + k放入代碼塊。

回到你在jquery中使用的問題：

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

您可以使用“this”來查找已點擊的內容

Answer 7

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

主要優點是event.data.item中的值將與創建onClick時的參數（在本例中為“i”）相同。 這很方便，因為在這種情況下，您不必擔心在for循環運行時i的值會發生變化。