Question

我正在使用数据属性来显示网站上照片的功劳：

<div id="test" data-credit="name">

但是我该如何使用这样的链接？：

<div id="test" data-credit="<a href="http://mydomain.com">name</a>">

像这样转义html不起作用：

&lt;a href=&quot;http://mydomain.com&quot; &gt;name&lt;/a&gt;

这是无法完成的，我将如何使用jQuery在文档就绪时将数据信用“name”重写为“<a href="http://mydomain.com">name</a>”？

JS在这里： http://jsfiddle.net/8muBm/58/

Answer 1

data属性只是字符串信息的持有者。您可以添加其他属性，例如data-credlink="http://mydomain.com"

$(document).ready(function () {
    $('div[data-credit]').each(function () {
        var THIS = $(this),
            link = $('<a>', {'href': THIS.attr('data-credlink'),
                              'text': THIS.attr('data-credit')
                            });
        THIS.append(link);
    });
})

<div id="test" data-credit="name" data-credlink="http://mydomain.com"></div>

Answer 2

问题出在href值周围的双引号中。由于您对数据信用属性使用双引号，因此需要将href属性周围的引号更改为单引号。否则，您将使用开头的href双引号关闭数据信用双引号。

尝试：

<div id="test" data-credit="<a href='http://mydomain.com'>name</a>">

如果HTML标记很简单，那么您可以轻松访问data-credit属性，例如：

$('#test').attr('data-credit');

Answer 3

这应该用jQuery执行重写：

$("div[data-credit]").each(function(){
    $(this).attr("data-credit",'<a href="http://mydomain.com">'+ $(this).attr("data-credit")+'</a>');
});

它查找具有data-credit属性的所有div元素，获取该属性并将其包装在该url周围并将其分配回属性。但正如菲利克斯已经问过的那样，你为什么要在那里存储完整的HTML？

示例：http://jsfiddle.net/niklasvh/fBW4V/

Answer 4

基本上，您在双引号内使用双引号，这会使属性无效。您必须将封装引号更改为单引号，或将属性值内的引号更改为单引号。

这就是我的意思：

<div id="test" data-credit="<a href='http://example.com'>name</a>">

以下是您可以用来测试的simple example：

<head>
<!-- Assume jQuery is loaded -->
<script type="text/javascript">
$(document).ready(function() {
    $("#v").val($("#test").attr("data-credit"));
});
</script>

</head>
<body>

<div id="test" 
    data-credit="<a href='http://example.com'>name</a>">
<input id="v" type="text" value="" />

</body>
</html>

请注意，使用转义的html does seem to work。

如何在“data”属性中使用href链接 - 或者用jQuery重写它？

4 个答案: