1

reddit から上位 25 件の投稿を追加し、それぞれのリンクを下のスライド div で開くスクリプトを作成しています。現在、スクリプトはループ内の各アイテムに対して同じ投稿を出力します。なぜこれを行っているのかは理解していますが、修正方法がわかりません! 誰でも間違いを見つけることができますか？

$(document).ready(function() {

// Reddit JSON array
var redditJSON = 'http://www.reddit.com/.json?jsonp=?';

// Define global variable for link content
var postContent = null;

//Get the JSON output from reddit and add to function "reddit"
$.getJSON(redditJSON,

function(reddit) {

    // Start loop of JSON data
    $.each(reddit.data.children, function(i, redditPost) {

        // Post data variables from Reddit JSON array        
        var author, ups, downs, url, title, commentCount, thumbnail, commentLink, imageNumber;

        author = redditPost.data.author;
        ups = redditPost.data.ups;
        downs = redditPost.data.downs;
        url = redditPost.data.url;
        title = redditPost.data.title;
        commentCount = redditPost.data.num_comments;
        thumbnail = redditPost.data.thumbnail;
        commentLink = redditPost.data.permalink;
        // Object containing content from the post URL
        postContent = '<object type="text/html" data="' + url + '" style="width:100%;height:100%"><p>image' + i + '</p></object>';
        imageNumber = i++;

        // Ouput image thumbnail if it exists
        if (thumbnail.length <= 6) {
            var hasThumbnail = '';
        } else {
            var hasThumbnail = '<img class="thumbnail" src="' + thumbnail + '" />';
        }

        // Output string    
        var redditPostOutput = '<ul data-role="listview"><li data-icon="false"><a href="#" class="postWrapper">' + hasThumbnail + '<div class="postTitle"><p class="no-ellipses">' + title + '</p></div><div class="votesWrapper"><div class="upsWrapper boldText">' + ups + '</div><div class="downsWrapper boldText">' + downs + '</div></div><div id="commentsLink"><p>Comments(' + commentCount + ')</p></div></a><div class="postContent"></div></li></ul>';

        // Append output string to div with ID Feed
        $('#feed').append(redditPostOutput).trigger("create");

        // Change background colour of alternating posts                
        $("li:odd").css("background-color", "rgba(0,0,0,0.2)").trigger("create");

    }); //each
    $(".postContent").hide();
    //toggle the componenet with class msg_body
    $(".postWrapper").click(function() {
        $(this).next(".postContent").slideToggle(500);
        // Append post content into postContant div when visible
        $('.postContent').append(postContent);
    });

}); //getJSON
});

http://jsfiddle.net/WUgvN/

どんな助けでも大歓迎です、ありがとう。

4

2 に答える 2

1

Loggie が指摘したように、ループpostContentを通過するたびに変数の値を設定し$.eachますが、ループを終了するまで、.postContent div のコンテンツとしてそれを渡しません。ループを最後に通過した後に変数が保持する値を常にそれらの div に渡します。

ループで各 div を作成するときに、コンテンツを含めることができます。

// Output string    
var redditPostOutput = '<ul data-role="listview"><li data-icon="false"><a href="#" class="postWrapper">' + hasThumbnail + '<div class="postTitle"><p class="no-ellipses">' + title + '</p></div><div class="votesWrapper"><div class="upsWrapper boldText">' + ups + '</div><div class="downsWrapper boldText">' + downs + '</div></div><div id="commentsLink"><p>Comments(' + commentCount + ')</p></div></a><div class="postContent">' + postContent + '</div></li></ul>';

http://jsfiddle.net/YQkBS/

于 2012-12-03T22:38:56.797 に答える
1

私はjQueryを使用したことがないので、解決策を投稿することはできませんが、ループ内で特定の投稿ごとに$.eachグローバル変数をコンテンツに設定しているため、ループの後に意味があるように見えることがわかります。postContent最後の投稿のコンテンツのみを持っています。

このため、いつでも

//toggle the componenet with class msg_body
$(".postWrapper").click(function() {
    $(this).next(".postContent").slideToggle(500);
    // Append post content into postContant div when visible
    $('.postContent').append(postContent);
});

$.eachが呼び出されると、選択した投稿のコンテンツが、ループ内の最後の投稿で取得されたコンテンツに設定されます。

于 2012-12-03T21:49:32.027 に答える