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

我从未使用过 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 回答
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 回答