Question

我正在编写一个脚本来附加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/

非常感谢任何帮助，谢谢。

Answer 1

我从未使用过jQuery，因此我无法为您发布解决方案，但我可以告诉您，问题似乎是因为在您的$.each循环中设置了全局变量{{1}在循环之后，每个给定帖子的内容意味着你只有最后一篇文章的内容。

因此，每当

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); });循环中为上一篇文章检索的内容。

Answer 2

正如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/

如何修复此循环以便加载和打开正确的链接？

2 个答案: