2016-05-14 11 views
0

RSSフィードを作成しようとしていて、1つの投稿を表示してうまく動作しています。複数の投稿を表示します。jQuery for RSSを使用して複数の投稿が表示されない

最初に投稿タイトル(パネルタイトル)のみが表示され、そのコンテンツ(データコンテンツ)を表示するためにクリックエフェクト(jQuery)が追加されました。複数の投稿を(コンソールに表示されたオブジェクトとして)取り出しますが、表示されません。

私は何をしたいですか? - >複数の投稿タイトルを最初に表示し、onClickはそれぞれのコンテンツ本文を表示します。

私はeach()とappend()を使うべきだと思いますが、どうやってそれを行うのかは分かりません。

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

答えて

1

手順この作品を作るために:

あなたが追加項目ごとに含むHTMLを追加する必要があり

あなたがここにfiddle

にコード全体を確認することができますがjsのファイルです。できるだけスクリプトを少し変更するために、各項目の構造体を含むvarを使用してこれを行い、各項目が追加される前に追加します。

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

追記:

その後、あなたはすべての項目を選択しないように、あなたはあなたが唯一のあなたが追加した項目を編集するために .last()を使用することができ、追加言うコンテンツに必要
$("body").append(itemLayout); 

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

アイテムが正しく追加されたので、ボタンがどこでも機能するようにする必要があります。彼らはこれにそれを変更すると、それは動的な要素にアクセスできるようになり、動的に現在のclickハンドラ文句を言わないの仕事を追加されているので:

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

そして、この内、あなたはこれだけのアイテムを選択していることを確認する必要があります要素。

私は、あなたのJSFiddleにいくつかの更新をした見てみると、それはあなたが後にしているものの大半を行う必要がありました:

Updated Fiddle

このバージョンでは、クローンにHTMLファイルから構造を使用します。そしてフィードを取り込み、それはまだ動的な要素ですが、これはHTMLファイルで、あなたのHTMLを保持します:

New fiddle

+0

はあなたに感謝し、それが正常に動作しませんが、あなたのようにHTMLまたはitemLayoutを(維持する方法があります示唆)静的なhtmlファイル(前と同じ)を追加し、関連する変更のみを追加しますか?基本的にjQueryから動的にレイアウトを作成していません。 – NewBee

+0

@ kshah27現時点でアイテムを追加したい場合は、動的に追加する必要があります。あなたが構造体を含む隠れた 'div'を作成し、毎回(構造体をvarに格納するのではなく)複製するのが、 – DBS

+0

です。メインのdivにcssプロパティを隠しとして追加し、それが表示されるたびに何を意味するのでしょうか?ええ、あなたはフィドルを更新できますか? – NewBee

関連する問題