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()功能访问这些数据。