logo标签列表

如何在"data"属性内使用href链接或使用jQuery重写它？

jqueryhtml
3
我在网站上使用数据属性来显示照片的信用信息：

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

<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将"data-credit" "name"重写为"<a href="http://mydomain.com">name</a>"？ JSfiddle链接：http://jsfiddle.net/8muBm/58/
2
你为什么想要将HTML存储在HTML属性中？我会将名称和URL分别存储或作为JSON存储，并动态生成HTML。 - Felix Kling
只是为了简单起见。但是我在使它简单化方面遇到了困难。 - markratledge
4个回答
3

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>
这显示了HTML标记，而不是链接。开始一个JSfiddle：http://jsfiddle.net/8muBm/58 - markratledge
1
问题出在 href 值周围的双引号。由于您正在使用双引号作为 data-credit 属性，因此您需要将 href 属性周围的引号更改为单引号。否则，您将用开头的 href 双引号关闭 data-credit 双引号。
尝试一下：
<div id="test" data-credit="<a href='http://mydomain.com'>name</a>">

如果HTML标记完好无损，你就可以轻松访问data-credit属性，例如：
$('#test').attr('data-credit');
单引号不起作用，我得到了标记的输出，但它只是HTML而不是链接。 - markratledge
在输出链接的那一行中，使用html方法而不是text方法。使用：$("#photocredit").html($(ui.panel).data("credit")); - robmisio
text方法转义任何HTML实体，这就是为什么标签以字面形式显示而不被解释为HTML的原因。 - robmisio
0

这应该使用jQuery执行重写：

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

它查找所有带有data-credit属性的div元素，获取该属性并将其包装在该URL周围，并将其重新分配给属性。但正如Felix已经问过的那样，为什么要在那里存储完整的HTML呢？

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

嗯... 这会打印出未呈现的 HTML 而不是链接。 - markratledge
将.text()更改为html()，$("#photocredit").html($(ui.panel).data("credit"));，http://jsfiddle.net/niklasvh/8muBm/64/ - Niklas
0

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

这就是我的意思：

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

这里有一个简单的示例，您可以用来测试：

<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 似乎有效。
不知道为什么，但单引号不起作用：我看到的是标记显示而不是呈现的链接。 - markratledge
开始一个JSfiddle：jsfiddle.net/8muBm/58 - markratledge
1
@songdogtech：实际上，您的版本（带有我的建议）确实有效，您只需要将对text的调用替换为对html的调用；您不想将<a href='http://mydomain.com'>name</a>呈现为文本，而是作为HTML。 - casperOne
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接