将数据与jQuery的DOM元素相关联 [英] Associating data to a DOM element for jQuery

问题描述

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

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>

这篇关于将数据与jQuery的DOM元素相关联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！