jquery - 將參數傳遞給函數

Question

這看起來像一個簡單的問題，但我找不到一個簡單的答案。所以我將從一個簡單的例子開始。

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

這裏是一個JavaScript函數...

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

在上面的例子中，可以在不破壞行爲（的JavaScript）來增加額外的內容（HTML的線）。 html的每一行都將自己的參數傳遞給javascript，以告訴它應該顯示什麼消息。

如果HTML改爲...

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

那麼我怎麼寫，知道被點擊其中的HTML行jQuery的功能？換句話說...

如何將參數傳遞給jquery函數？

Answer 1

如果我明白你的問題正確，你可以做這樣的：

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

在這種情況下，我會使用一個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中它不是有效，但驗證是你所擁有的唯一的問題，它會在每一個HTML4瀏覽器。如果它在HTML4中沒有丟失，它將不會被添加到HTML5中......我個人會無論它是否被驗證，都會使用它。

Answer 3

首先爲了讓你顯示代碼在你的文章中放置代碼，選擇它並按下ctrl + k放入代碼塊。

返回問題jQuery中使用：

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

您可以使用「這個」找出被點擊

Answer 4

你可以做什麼來設置包含值自定義屬性這需要適應功能。類似於

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

數據方法是一個很好的方法。不過，如果是我，我寧願不通過定義對象地圖中的聲音來發現任何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 6

隨着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中的值將與參數（此處爲「i」）相同案件）是在onClick創建時。這很方便，因爲在這種情況下，當for循環運行時，您不必擔心我更改的值。

Answer 7

，如果你真的想用這個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 
});