Question

我正在尝试使用JQuery AJAX编写一个相当复杂的动态网页，我正在努力解决如何将我的链接（<a ...>）与其绑定的数据相关联，例如动作名称，和数据元素ID。我考虑了几种不同的方案，但我不确定我喜欢它们中的任何一种。

将其构建为onclick，这意味着我必须在链接生成中对其进行配置。

<a onlick="func('abc', 123)">...</a>

将其插入到链接的id中，这意味着在JavaScript中解析它。

<a id="link_abc_123">...</a>

将链接放在带有隐藏输入元素的div中......

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

是否有最佳实践或普遍接受的结构化数据方式？

Answer 1

最佳做法应始终是，严格分开代码。

这意味着，您不应该在后端源代码中包含任何Javascript。所以我个人非常喜欢在使用模板引擎时将necesarry数据放入元素（最后一个例子），或者在单独的请求中发送necesarry数据（例如 JSON ））给客户。

使用jQuery，这是一种非常方便的方法来创建data-属性，您可以在其中存储任何信息，而jQuery会将这些属性中的值转换为数据expandos 。例如：

<div id="test" data-foo='bar' data-test='{"cool": "stuff"}'>Just a div</div>

使用jQuery var $test = $('#test')选择该元素时，您可以访问：

$test.data('foo') // === 'bar'
$test.data('test').cool // === 'stuff'

了解详情：http://api.jquery.com/data/

Answer 2

使用HTML5，您可以使用data-* attributes - 例如：

<a href="somewhere" data-action="do-this" data-foo="bar">...</a>

jQuery实际上支持哪些内容 - 对$('a').data()的调用将包含data-*值。

Answer 3

对于简单的事情，我使用的函数如下：

function getIdStr(i, sDelim) {
    if (typeof i != "string") {
        var i = $(i).attr("id");
    }
    var arr = i.split(sDelim || /_|-/);
    if (arr.length > 1) {
        return arr[arr.length-1];
    } else {
        return "";
    }
}

// usage
$(function(){
    $(".data .action").click(function(){
        doSomething(getIdStr(this)); // -> 123
    });
});

对于较重的东西，您可能会尝试将data附加到最顶层的容器。

Answer 4

我会选择新的Custom Data Attributes HTML5带来的。

只需使用此<a data-action="foo" data-id="bar">...</a>

即可

另外，jQuery already has support来获取这些数据属性

Answer 5

您可以向输入添加自定义属性并在javascript中访问它。例如

<input type="hidden" name="action" value="abc" yourproperty='<%= Eval("YourDataID") %>'/>

如何将数据（id）与JavaScript的链接相关联？

5 个答案: