的JavaScript：將參數傳遞給onclick處理器

Question

我需要額外的參數傳遞給onclick處理程序。我不能決定哪種方式是「更好」：

編輯：
語境：我有一個表，其中顯示了事件的名冊。每一行都有一個「刪除」按鈕。將recordId傳遞給刪除處理程序的更好方法是什麼？

$('a.button').click(function() { 
    var recordId = $(this).metadata().recordId; 
    console.log(recordId); 
}); 
... 
<tr>...<a class='{recordId:1} button'>delete</a></tr> 
<tr>...<a class='{recordId:2} button'>delete</a></tr> 

或

function delete(recordId) { 
    console.log(recordId); 
} 
... 
<tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr> 
<tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr> 

什麼是每個選項的利弊？

注意：我使用a.button作爲自定義CSS樣式的按鈕，它確實是而不是表現爲鏈接。

編輯：
，我將不勝感激的替代解決方案，以及如果你能提供的參數替代的優勢。

Answer 1

存儲記錄id作爲元素本身的屬性，而不是使用存儲它在一個奇怪的格式元數據的插件，我會建議你使用HTML5的數據屬性也向後兼容。

一排看起來像：

<tr> .. <a data-id="1">delete</a> .. </tr> 

在處理程序中，檢索它的屬性值和行爲

function deleteRecord() { 
    var rowId = $(this).attr('data-id'); 
    ... 
} 

這是與使用元數據的插件，但它不超載class屬性。這不需要額外的插件。它使用一個單一的處理程序，就像元數據插件那樣可以處理大型數據集。

內聯onclick處理不好出於同樣的原因。每行創建一個新的處理程序。它削弱了靈活性，通常是一種不好的做法。

Answer 2

$('a.button').click(function() { 
    var classes = $(this).attr('class').split(' '); 
    var option; 

    for(var i in classes) 
    { 
     if(classes[i].indexOf('option') != -1) 
     { 
     option = classes[i].substr(6); 
     break; 
     } 
    } 

    console.log(option); 
}); 
... 
<a class='option-yes button'>Yes</a>  
<a class='option-no button'>No</a> 

Answer 3

編輯：
這聽起來像你將數據分配到這些「按鈕」動態。你最好使用jQuery的.data()方法將數據分配給按鈕，然後從那裏獲取數據。我已更新我的示例代碼。

如果每個按鈕的類型進行不同的操作，然後使用不同的處理程序爲每個類型的按鈕：

$('a.button').click(function (e) { 
    // Stuff with $(this).data().recordId 
}); 

$（「a.button.no」）點擊（函數（E）{// 東西 }）;

... 
<a class="button yes">Yes</a> 
<a class="button no">No</a> 

Answer 4

我只想去與你的第二個辦法 - 這是最簡單的，並沒有什麼不妥的地方。