将数据与jQuery的DOM元素相关联

本文介绍了将数据与jQuery的DOM元素相关联的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在前世，我可能做过这样的事情:

In a previous life, I might have done something like this:

<a href="#" onclick="f(311);return false;">Click</a><br/> <a href="#" onclick="f(412);return false;">Click</a><br/> <a href="#" onclick="f(583);return false;">Click</a><br/> <a href="#" onclick="f(624);return false;">Click</a><br/>

现在使用jQuery，我可能会做这样的事情:

Now with jQuery, I might do something like this:

<a class="clicker" alt="311">Click</a><br/> <a class="clicker" alt="412">Click</a><br/> <a class="clicker" alt="583">Click</a><br/> <a class="clicker" alt="624">Click</a><br/> <script language="javascript" type="text/javascript"> $(".clicker").bind("click", function(e) { e.preventDefault(); f($(this).attr("alt")); }); </script>

除了使用alt属性将数据从DOM传递到jQuery之外，其他感觉都像是骇客，因为这不是它的预期目的.在DOM中存储/隐藏数据以供jQuery访问的最佳实践是什么?

Except that using the alt attribute to pass the data from the DOM to jQuery feels like a hack, since that's not its intended purpose. What's the best practice here for storing/hiding data in the DOM for jQuery to access?

推荐答案

JQuery.data 可让您将字典与DOM元素相关联.可以通过jQuery设置此数据:

JQuery.data lets you associate a dictionary to a DOM element. This data can be set via jQuery:

<a class="clicker">Click</a><br/> <a class="clicker">Click</a><br/> <a class="clicker">Click</a><br/> <a class="clicker">Click</a><br/> <script language="javascript" type="text/javascript"> var values = new Array("311", "412", "583", "624"); $(".clicker").each(function(i, e) { $(this).data('value', values[i]).click(function(e) { f($(this).data('value')); }); }); </script>

或(自jQuery 1.4.3起)使用 HTML5数据属性，即使在非HTML5文档中也可以使用:

or (since jQuery 1.4.3) using the HTML5 data- attributes, which work even in non-HTML5 documents:

<a class="clicker" data-value="311">Click</a><br/> <a class="clicker" data-value="412">Click</a><br/> <a class="clicker" data-value="583">Click</a><br/> <a class="clicker" data-value="624">Click</a><br/> <script language="javascript" type="text/javascript"> $(".clicker").click(function(e) { f($(this).data('value')); }); </script>