Question

在以前的生活中，我可能做过这样的事情：

<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，我可能会这样做：

<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访问的最佳实践是什么？

Answer 1

你可以使用像“clicker-123”这样的id属性，然后解析出这个数字。我通常这样做或使用'rel'属性。

所以，从本质上讲，我所知道的没有更好的方法。我希望这个帖子证明我错了。

Answer 2

您最好使用HTML5的新功能：data-... - 属性。

您的html代码如下所示：

<a class="clicker" data-mynumber="311">Click</a>

然后您可以使用el.attr('data-mynumber')来获取数据。

您可以选择任何名称，而不是mynumber。

这适用于所有浏览器。

Answer 3

JQuery.data允许您将字典与DOM元素相关联。这个数据可以通过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 data- attributes，它甚至可以在非HTML5文档中使用：

<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>

Answer 4

对不起，但是如果你已经填写了alt标签，我就看不到将onclick处理程序的赋值延迟到jQuery实际上是什么给你买了什么。这不仅仅是“现在我有一把锤子，每个问题看起来都像钉子一样。”我认为当动作不依赖于额外的数据而不是从内容中自然派生的数据时，最好使用jquery方法，例如，类定义，标签类型等。

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

4 个答案: