データ - *に異なるハイパーリンクを追加するには？

Question

は

私は、次のHTMLコードを持っている：

<article class="article" data-quota="Here goes nothing" data-share="Here goes social" data-tag1="Tag1" data-tag2="Tag2" data-tag3="Tag3"> 
    <h3>Author name</h3> 
</article> 

とJS：

function articleTemplate() { 
    $('.article').each(function() { 

    var $this = $(this), 
     dataQuota = $this.data('quota'), 
     dataTag1 = $this.data('tag1'), 
     dataTag2 = $this.data('tag2'), 
     dataTag3 = $this.data('tag3'), 
     dataShare = $this.data('share'); 

    var template = '<h4>' + dataQuota + '</h4>' + 
        '<h5>' + dataTag1 + ',' + dataTag2 + ',' + dataTag3 + '</h5>' + 
        '<footer>' + dataShare + '</footer>'; 

    $this.append(template); 
    }); 
} 

を私はJavaScriptを使用して、いくつかのtemplateingをやっているし、今まで私はこれを得ました。 outputed HTMLは次のとおりです。

<h3>Author name</h3> 
<h4>Here goes nothing</h4> 
<h5>Tag1,Tag2,Tag3</h5> 
<footer>Here goes social</footer> 

今私は、データクォータ、データ共有、データTAG1などへのハイパーリンクを追加したいですか？

Answer 1

さまざまなオプションがあります。一つは、そのように書くことになります：

<article class="article" data-quota-content="Here goes nothing" data-quota-href="/some/link"> 
    <h3>Author name</h3> 
</article> 

jQueryが自動的にネストされたオブジェクトにデータを変換します。

と同等のソリューションは、これも自動的に解析されますあなたの属性にJSONフォーマットされた文字列を入れて次のようになります。

<article class="article" data-quota='{"content":"Here goes nothing", "href":"/some/link"}'> 
    <h3>Author name</h3> 
</article> 

だから、あなたが書く場合：

var $this = $(this), 
    dataQuota = $this.data('quota') 

その後dataQuotaが対象となります以下を含む：

{ 
    content : "Here goes nothing", 
    href : "/some/link" 
} 

方法：上記の行ったよう注意点としては

var template = '<h4><a href="'+dataQuota.href+'">' + dataQuota.content + '</a></h4>' + 

、あなたがHTMLコードを作成するべきではない、より良い方法は、そのように作成することです：

$this.append( 
    $('<h4>').append(
     $('<a>') 
      .attr('href',dataQuota.href) 
      .text(dataQuota.content) 
    ) 
); 

これは、あなたが取得していないことを保証しますエスケープの問題。

Answer 2

のjsファイルにちょうどいくつかの簡単なtweek：

function articleTemplate() { 
    $('.article').each(function() { 

     var $this = $(this), 
      dataQuota = $this.data('quota'), 
      dataTag1 = $this.data('tag1'), 
      dataTag2 = $this.data('tag2'), 
      dataTag3 = $this.data('tag3'), 
      dataShare = $this.data('share'); 

     var template = '<h4><a href="' + url + '">' + dataQuota + '</a></h4>' + 
         '<h5><a href="' + url2 + '">' + dataTag1 + '</a>,' + dataTag2 + ',' + dataTag3 + '</h5>' + 
         '<footer>' + dataShare + '</footer>'; 

     $this.append(template); 
    }); 

} 

var url = "http://bencollier.net/"; 
var url2 = "http://google.ro/";