如何在“数据”属性中使用 href 链接 - 或使用 jQuery 重写它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6216098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I use an href link within a "data" attribute - or rewrite it with jQuery?
提问by markratledge
I'm using the data attribute to show a credit for a photo on a site:
我正在使用 data 属性来显示网站上照片的功劳：
<div id="test" data-credit="name">
But how do I do use a link, like this?:
但是我如何使用链接，像这样？：
<div id="test" data-credit="<a href="http://mydomain.com">name</a>">
Escaping the html, like this, doesn't work:
像这样转义 html 不起作用：
<a href="http://mydomain.com" >name</a>
It that can't be done, how would I use jQuery to rewrite the data-credit "name" into "<a href="http://mydomain.com">name</a>" on document ready?
这是不可能的，我将如何使用 jQuery 将数据信用“ name”重写为“ <a href="http://mydomain.com">name</a>”文件准备好？
JSfiddle here:http://jsfiddle.net/8muBm/58/
JSfiddle在这里：http : //jsfiddle.net/8muBm/58/
回答by Chris May
The dataattribute is just a holder for string information. You could probably add another attribute like data-credlink="http://mydomain.com"
该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>
回答by robmisio
The issue is in the double quotes around the href value. Since you are using double quotes for The data-credit attribute, you would need to change the quotes around the href attribute to single quotes. Otherwise, you are closing the data-credit double quotes with the opening href double quote.
问题出在 href 值周围的双引号中。由于您对 data-credit 属性使用双引号，因此您需要将 href 属性周围的引号更改为单引号。否则，您将使用开头的 href 双引号关闭数据信用双引号。
Try:
尝试：
<div id="test" data-credit="<a href='http://mydomain.com'>name</a>">
If the HTML markup is in-tact, you could then easily access the data-credit attribute, for example:
如果 HTML 标记完好无损，则您可以轻松访问 data-credit 属性，例如：
$('#test').attr('data-credit');
回答by casperOne
Basically, you are using double quotes inside of double quotes, this invalidates the attribute. You either have to change the encapsulating quotes to single quotes, or change the quotes inside the attribute value to single quotes.
基本上，您在双引号内使用双引号，这会使属性无效。您要么必须将封装引号更改为单引号，要么将属性值内的引号更改为单引号。
Here's what I mean:
这就是我的意思：
<div id="test" data-credit="<a href='http://example.com'>name</a>">
Here's a simple exampleyou can use to test:
这是一个可以用来测试的简单示例：
<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>
Note that using the escaped html does seem to work.
请注意，使用转义的 html似乎确实有效。
回答by Niklas
This should perform the rewrite with jQuery:
这应该使用 jQuery 执行重写：
$("div[data-credit]").each(function(){
$(this).attr("data-credit",'<a href="http://mydomain.com">'+ $(this).attr("data-credit")+'</a>');
});
It looks for all div elements with data-credit attribute, gets that attribute and wraps it around that url and assigns it back to the attribute. But as Felix already asked, why would you want to store the full HTML there?
它查找所有具有 data-credit 属性的 div 元素，获取该属性并将其包装在该 url 周围并将其分配回该属性。但是正如 Felix 已经问过的那样，您为什么要将完整的 HTML 存储在那里？
Example: http://jsfiddle.net/niklasvh/fBW4V/
