如何在「數據」屬性中使用href鏈接 - 或者用jQuery重寫它？

我使用的數據屬性來顯示網站上的照片信貸：如何在「數據」屬性中使用href鏈接 - 或者用jQuery重寫它？

<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>」準備好了嗎？

的jsfiddle這裏：http://jsfiddle.net/8muBm/58/

來源

2011-06-02 markratledge

爲什麼要將HTML存儲在HTML屬性中？我會將名稱和URL單獨存儲或作爲JSON存儲並動態生成HTML。 – 2011-06-02 14:52:40

只是爲了簡單。但我無法以簡單的方式使其工作。 – markratledge 2011-06-02 21:01:45

這應該與jQuery執行重寫：

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

它看起來與數據信用屬性的所有div元素，獲取屬性和包裝它周圍的網址並將其分配回該屬性。但正如Felix已經問到的那樣，爲什麼要在那裏存儲完整的HTML？

實施例：http://jsfiddle.net/niklasvh/fBW4V/

來源

2011-06-02 14:52:05 Niklas

嗯......這會打印出未呈現的html而不是鏈接。 – markratledge 2011-06-02 21:04:41

啓動JSfiddle：http://jsfiddle.net/8muBm/58/ – markratledge 2011-06-02 21:12:21

將'.text（）'改爲'html（）'，'$（「＃photocredit」）。html（$（ui.panel） .data（「credit」））;'，http://jsfiddle.net/niklasvh/8muBm/64/ – Niklas 2011-06-03 05:39:56

的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>

來源

2011-06-02 14:57:49

這顯示了html標記而不是鏈接。開始JSfiddle：http://jsfiddle.net/8muBm/58 – markratledge 2011-06-02 21:15:04

的問題是圍繞href值雙引號。由於您正在使用double-quotes作爲data-credit屬性，因此您需要將href屬性的引號更改爲單引號。否則，您將以打開的href雙引號關閉數據信用雙引號。

嘗試：

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

如果HTML標記是，圓通，然後你可以很容易地訪問數據，信用屬性，例如：

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

來源

2011-06-02 15:01:24 robmisio

沒有運氣與單引號;我得到打印出來的標記，但它只是HTML而不是鏈接。 – markratledge 2011-06-02 21:02:20

在輸出鏈接的行中，使用html方法而不是文本方法。使用：$（「＃photocredit」）。html（$（ui.panel）.data（「credit」））; – robmisio 2011-06-03 04:20:47

文本方法轉義任何html實體，這就是爲什麼標籤顯示字面而不是解釋爲html。 – robmisio 2011-06-03 04:27:02

基本上，您使用的是雙引號在雙引號內，這會使該屬性無效。您必須將封裝的引號更改爲單引號，或將屬性值內的引號更改爲單引號。

這裏就是我的意思是：

<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。

來源

2011-06-02 15:14:09 casperOne

不知道爲什麼，但單引號不起作用：我看到顯示的標記而不是呈現的鏈接。 – markratledge 2011-06-02 21:04:46

開始JSfiddle：jsfiddle.net/8muBm/58 – markratledge 2011-06-02 21:14:35

@songdogtech：其實，[你的版本（與我的建議）確實工作]（http://jsfiddle.net/8muBm/62/），你只需要更換通過調用['html']（http://api.jquery.com/html/）調用'text';您不希望將'name'呈現爲文本，而是以* HTML *的形式呈現。 – casperOne 2011-06-02 21:54:01

如何在「數據」屬性中使用href鏈接 - 或者用jQuery重寫它？

回答

相關問題