HTML和jQuery信息傳遞設計

Question

我正在設計一個使用ASP.NET和jQuery的webapp，我可以使用一些建議。

當前，ASP.NET頁面呈現未知數量的單擊時執行操作的元素。前端的Javascript根據選定的特定元素處理單擊事件。

每個元素都嵌入了javascript函數需要的信息。這個信息被添加爲額外的屬性。因此，例如，一個給定的元素可能看起來像

<a href="#" id="123" extrainformation="something important">Link 123</a> 

的jQuery然後裝配點擊事件，並使用extrainformation屬性作爲內部函數的參數。每個元素有3-5個參數。

這很好，但我最近聽說它可能不是最佳實踐，因爲它不符合WC3。一種可能的解決方案是爲每個元素直接調用具有必要參數的內部javascript函數。然而，這使我感到不舒服，因爲我在呈現頁面和執行客戶端邏輯之間失去了關注的分離。

有沒有更好的方法來做到這一點？或者，也許我只是在推翻它？

Answer 1

是的還有更好的方法，它叫做HTML5 Data Attributes你可以使用$.data()接口從jQuery訪問它們。

例如：

//instead of 
<a href="#" id="123" extrainformation="something important">Link 123</a> 
//use 
<a href="#" id="123" data-info="something important">Link 123</a> 

//then access it like 
var info = $('#123').data('info'); 
alert(info); //alerts: 'something important' 

基本上任何開始data-被存儲爲關於在DOM該元素數據，jQuery的能夠經由$.data()功能訪問這些數據。