Javascript 如何修复此循环，以便在单击时加载并打开正确的链接？

我正在编写一个脚本来添加reddit的前25篇文章，并在下面的滑动分区中打开相应的链接。当前，脚本为循环中的每个项目输出相同的帖子。我明白它为什么这样做，我只是不知道如何修复它！有人能发现错误吗

$(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
});

$（文档）.ready（函数（）{
//Reddit JSON数组
var redditJSON=http://www.reddit.com/.json?jsonp=?';
//为链接内容定义全局变量
var postContent=null；
//从reddit获取JSON输出并添加到函数“reddit”
$.getJSON（redditJSON，
功能（reddit）{
//JSON数据的开始循环
$.each（reddit.data.children，函数（i，redditPost）{
//从Reddit JSON数组发布数据变量
var作者、上升、下降、url、标题、注释计数、缩略图、注释链接、图像编号；
author=redditPost.data.author；
ups=redditPost.data.ups；
downs=redditPost.data.downs；
url=redditPost.data.url；
title=redditPost.data.title；
commentCount=redditPost.data.num\u comments；
缩略图=redditPost.data.缩略图；
commentLink=redditPost.data.permalink；
//对象，该对象包含来自post URL的内容
postContent='图像'+i+'
'；
imageNumber=i++；
//输出图像缩略图（如果存在）
如果（thumbnail.length我从未使用过jQuery，因此我无法为您发布解决方案，但我可以告诉您，问题似乎是因为在
$中。每个
循环都将全局变量
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);
});

调用时，它将所选帖子的内容设置为在
$中为最后一篇帖子检索的内容。每个
循环。
正如Loggie所指出的，尽管您在每次通过
$时都为
postContent
变量设置了值。每个
循环都不会将其作为任何.postCon的内容传递帐篷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>';

//输出字符串
var redditpostpoutput='
'+postContent+'
'；

JSFIDLE对我来说似乎工作得很好。我在输出中看到了不同的帖子。对不起，我忘了提到，当你单击每个链接时，内容是相同的，单击后内容会向下滑动。这样做会导致页面加载时，每个链接都会加载，即使它是隐藏的。我希望在单击链接时加载内容。为此，你可以“我需要存储这些值，并在每次单击时调用它们。我已经在上放置了一个更新的示例，将这些值放入一个数组中，并在单击时设置.postContent div。太棒了，非常感谢！一位朋友建议将URL放入一个数组中，但我就是想不出来。我仍在尝试了解这是如何工作的，但再次感谢！”！