5

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

<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 感觉像 hack，因为这不是它的预期目的。在 DOM 中存储/隐藏数据以供 jQuery 访问的最佳实践是什么？

4

4 回答 4

4

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

因此，从本质上讲，我知道没有更好的方法可以做到这一点。我希望这个线程证明我错了。

于 2008-12-12T22:47:52.630 回答
4

您最好使用 HTML5 的一个新特性：data-...-attribute。

您的 html 代码将如下所示：

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

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

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

这适用于所有浏览器。

于 2010-04-25T19:32:10.373 回答
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 数据属性，即使在非 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>
于 2008-12-12T23:09:30.963 回答
1

很抱歉，但如果您已经填写了 alt 标签，我看不出延迟分配给 jQuery 的 onclick 处理程序实际上会给您带来什么。这不就是“现在我有了锤子，每一个问题看起来都像钉子”这样的例子吗？我认为当动作不依赖于从内容中自然派生的额外数据时，最好使用 jquery 方法，例如，类定义、标签类型等。

于 2008-12-12T23:14:01.953 回答