Wie füge ich verschiedene Hyperlinks zu data- * hinzu?

Question

Ich habe den folgenden HTML-Code:

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

und 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); 
    }); 
} 

ich einige templateing mit Javascript tue und bis jetzt habe ich diese. Die outputed html ist:

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

Jetzt möchte ich Hyperlinks zu Daten-Quote, Daten-Anteil, Daten-tag1 usw. hinzufügen?

Answer 1

Sie, wie verschiedene Optionen. Man würde es so schreiben:

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

jQuery wird die Daten automatisch in ein verschachteltes Objekt konvertieren.

und gleichwertige Lösung wäre, eine JSON formatierten String in Ihr Attribut setzen diese auch automatisch analysiert werden:

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

Also, wenn Sie schreiben:

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

Dann dataQuota wird ein Objekt sein, enthält:

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

Und Sie könnten es verwenden, dass Übrigens:

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

Als Hinweis, sollten Sie nicht HTML-Code erstellen, wie Sie oben haben, ein besserer Weg ist es auf diese Weise zu erstellen:

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

Dies stellt sicher, dass Sie nicht über get Probleme mit der Flucht.

Answer 2

nur einige einfache tweek zu js-Datei:

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/";