代码之家  ›  专栏  ›  技术社区  ›  Soldarnal

将数据与jQuery的DOM元素关联

  •  5
  • Soldarnal  · 技术社区  · 17 年前

    在前世,我可能会做这样的事情:

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

    4 回复  |  直到 17 年前
        1
  •  4
  •   John Sheehan    17 年前

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

    所以,本质上,据我所知,没有比这更好的方法了。我希望这条线索能证明我错了。

        2
  •  4
  •   edwin    16 年前

    你最好使用HTML5的一个新功能: data-... -属性。

    你的html代码看起来像这样:

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

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

    你可以选择任何名字,而不是我的号码。

    这在所有浏览器中都有效。

        3
  •  3
  •   Mark Brackett    13 年前

    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>
    
        4
  •  1
  •   tvanfosson    17 年前

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