javascript - 如何将数据(id)与 JavaScript 链接关联起来？

Question

我正在尝试使用 JQuery AJAX 编写一个相当复杂的动态网页，并且我正在努力解决如何将我的链接 ( <a ...> ) 与其绑定(bind)的数据(例如操作名称和数据)相关联元素 ID。我考虑过几种不同的方案，但我不确定我喜欢其中的任何一个。

将其构建为 onclick ，这意味着我必须在链接生成中配置它。

<a onlick="func('abc', 123)">...</a>

将其插入到链接的 id 中，这意味着在 JavaScript 中将其解析出来。

<a id="link_abc_123">...</a>

将链接放入带有隐藏输入元素的 div 中...

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

是否有构建此数据的最佳实践或普遍接受的方法？

Answer 1

最佳实践应该始终是严格分离代码。

这意味着，您不应在后端源代码中包含任何 Javascript。因此，就我个人而言，我非常喜欢在使用模板引擎时将必要的数据放入元素(您的最后一个示例)中，或者在单独的请求中仅发送必要的数据(例如JSON) )给客户端。

使用 jQuery，这是创建 data- 属性的一种非常方便的方法，您可以在其中存储任何信息，而 jQuery 会将这些属性中的值转换为 < em>数据扩展。例如:

<div id="test" data-foo='bar' data-test='{"cool": "stuff"}'>Just a div</div>

使用 jQuery var $test = $('#test') 选择该元素时，您可以访问:

$test.data('foo') // === 'bar'
$test.data('test').cool // === 'stuff'

了解更多:http://api.jquery.com/data/