HTML和jQuery信息传递设计

本文关键字：信息 jQuery HTML | 更新日期: 2023-09-27 18:07:29

我正在使用ASP设计一个web应用程序。. NET和jQuery，我可以使用一些建议。

目前，ASP。页呈现未知数量的元素，这些元素在单击时执行操作。前端的Javascript根据选定的特定元素来处理click事件。

每个元素都嵌入了javascript函数所需的信息。此信息作为额外属性添加。例如，给定的元素可能看起来像

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

jQuery然后附加一个click事件，并使用extrainformation属性作为内部函数的参数。每个元素有3-5个参数。

这个工作很好，但我最近听说它可能不是最佳实践，因为它不符合WC3。一种可能的解决方案是让每个元素直接使用必要的参数调用内部javascript函数。然而，这让我感到不舒服，因为我失去了渲染页面和执行客户端逻辑之间的关注点分离。

有更好的方法吗?或者我只是想多了?

HTML和jQuery信息传递设计

是的，有一个更好的方法，它被称为HTML5数据属性你可以使用$.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()函数访问该数据。

相关文章：