Mehrere Beiträge nicht sichtbar mit jQuery für RSS

Question

Ich versuche, RSS-Feed zu erstellen und funktioniert gut mit der Anzeige eines Beitrags, ich möchte es mehrere Beiträge anzuzeigen.

Anfänglich sind nur Post-Titel (Panel-Titel) sichtbar und bei Klick wurde der Toggle-Effekt (jQuery) hinzugefügt, um seinen Inhalt (Dateninhalt) anzuzeigen. Es ruft mehrere Posts ab (als Objekt, das in der Konsole angezeigt wird), ist aber nicht sichtbar.

Was ich will? -> um zunächst mehrere Titel anzuzeigen und onClick den jeweiligen Inhalt anzuzeigen.

Ich denke, ich sollte jedes verwenden() und append(), aber ich bin mir nicht sicher, wie es geht.

können Sie den gesamten Code überprüfen auf fiddle

hier ist js-Datei:

function blogRSS(url, container) { 
var content = $('.data-content'); //console.log(content); 

$.ajax({ 
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), 
dataType: 'json', 
success: function(data) { 
    console.log(data.responseData.feed); //it shows object of all fetched posts 

    $.each(data.responseData.feed.entries, function(key, value) { 
     var thehtml = '<h4><a href="' + value.link + '" target="_blank">' + value.title + '</a></h4>'; 

     $('.panel-heading').html(thehtml); 
     $('.data-content').html(value.content); 

    }); 
    $('.data-title').find('h4').addClass('panel-title'); 
} 
}); 
}; 

Answer 1

Schritte, diese Arbeit zu machen:

Sie müssen die mit HTML für jedes Element anhängen Sie hinzufügen . Um so wenig Änderungen wie möglich an Ihrem Skript vorzunehmen, habe ich eine var verwendet, die die Struktur für jedes Element enthält, und diese dann angehängt, bevor jedes Element hinzugefügt wird.

var itemLayout = '<div class="panel panel-default "><div class="data-title"><div class="glyphicon glyphicon-collapse-down icon expand_icon"></div><div class="panel-heading"></div><div class="bkmark_icon"></div></div><div class="data-content panel-body"></div></div>'; 

Anfügen:

$("body").append(itemLayout); 

Dann müssen Sie auf den Sie Inhalt sagen hinzufügen, so dass Sie jedes Element nicht auswählen, Sie .last() verwenden können, dass Sie nur bearbeiten, um das Element machen Sie gerade hinzugefügt .

Jetzt, da die Elemente korrekt hinzugefügt werden, müssen wir sicherstellen, dass die Schaltflächen überall funktionieren. Da sie ist dynamisch, Ihren aktuellen click Handler wird nicht funktionieren, ändert es dazu hinzugefügt wird es ermöglichen, dynamische Elemente zuzugreifen:

$(document).on('click', '.panel-heading, .expand_icon', function() {}) 

Und innerhalb dieser, müssen Sie sicherstellen, dass Sie die Auswahl nur diese Artikel Elemente.

ich einige Updates für Ihre JSFiddle gemacht haben, werfen Sie einen Blick und es sollte die meisten tun, was Sie nach:

Updated Fiddle

Diese Version enthält eine Struktur, die aus der HTML-Datei Klon verwenden und füllen Sie den Feed, es ist immer noch dynamische Elemente, aber das hält Ihre HTML in der HTML-Datei:

New fiddle