Question

我在JQUERY中创建了一个.each循环，循环遍历JSON文件中的Data，然后以小缩略图填充内容。当您单击该缩略图时，它将使用缩略图上的匹配内容填充帖子页面。

我遇到的问题是当你点击每个缩略图时，它只会显示数组中的最后一个对象而不是相应的内容。

无论我点击哪个缩略图，它都会显示最后的对象内容。我真的很感激一些帮助。

我附上了一段代码和JSON数据文件。我已使用问题评论标记了问题区域。

我不确定如何解决关闭问题。

代码 -

var newsData;
var eventsData;
var nightData;
var dineData;
var outData;
var videoData;
var data;
var str = 'news';

function getposts(str) {
    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug=';
    $.ajax({
        type: 'GET'
        , url: baseUrl + str
        , data: {
            get_param: 'value'
        }
        , dataType: 'json'
        , success: function postData(data) {
            if (str == 'news') {
                newsData = data;
                displayPosts(newsData);
            }
            if (str == 'events') {
                eventsData = data;
            }
            if (str == 'nightlife%20culture') {
                nightData = data;
            }
            if (str == 'dine') {
                dineData = data;
            }
            if (str == 'family%20fun') {
                outData = data;
            }
            if (str == 'videos') {
                videoData = data;
            }
        }
    });
}
getposts('news');
getposts('events');
getposts('nightlife%20culture');
getposts('dine');
getposts('family%20fun');
getposts('videos');

function displayPosts(str) {
    data = str;
    if (str == 'news') {
        data = newsData;
    }
    if (str == 'events') {
        data = eventsData;
    }
    if (str == 'nightlife%20culture') {
        data = nightData;
    }
    if (str == 'dine') {
        data = dineData;
    }
    if (str == 'family%20fun') {
        data = outData;
    }
    if (str == 'videos') {
        data = videoData;
    }
    var maxLength2 = 6;
    var maxLength = 130;
    var imgTitle = {};
    var imgThumb = {};
    var cat = {};
    var ex = {};
    var text = {};
    $('#post-cont').empty();
    
    $.each(data.posts, function (i, item) {
        //TITLE
        imgTitle = item.title.replace('Newsflash:', '');
        console.log(imgTitle);
        
        //THUMBNAIL
        imgThumb = item.thumbnail_images.medium.url;
        
        //CATEGORY
        cat = item.categories[0].title;
        
        //EXCERPT
        ex = item.excerpt.substr(0, maxLength);
        
        //CONTENT
        text = item.content;
        
        $("#post-cont").append('<div class="p1 full-post-text" id="search-result"><a class="p1 link-click" target="_blank"></a><div class="p1 text-post-img"><span class="p1 card-img1" id="p1Img" style="background-image:url(' + imgThumb + ');"></span><a class="p1 post-cat">' + cat + '</a> </div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1Heading">' + imgTitle + '</h2>' + ex + '</div></div>');
        
        //    POST POPULATE ***
    $(document).on('click', '#search-result', function(i, item) {
        $('#cont').css('left', '0px');
        $('#post-header').css('left', '0px');
        $('#post-cont').css('left', '-9999px');
        $('#slider').css('left', '-9999px');
        
        //Image Post1 ***PROBLEM AREA***
        
        $('#post-pop').append('<h1 class="post1 header">' + imgTitle + '</h1><p class="lay2 post-source"></p><p class="post1 text"></p><div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div>');
        
        console.log(imgTitle);
    
    });
        
    });
} //End of displayPosts

            <div class="post1 cont" id="cont">
                
                <div class="content-container">
                    <div class="header-img">
                        <span id="para-img"></span>
                    </div>

                    <div class="pageContent" id="post-pop">

                        
                    </div>
                </div>
                
            </div>

JSON Data File

Answer 1

您正在使用img_title作为全局变量，因此它会更新到循环的最后一个元素并存储最后一个元素详细信息。如果您有索引，可以尝试类似

的内容

    $('#post-pop').append('<h1 class="post1 header">' + data.posts[i].img_title + '</h1><p class="lay2 post-source"></p><p class="post1 text"></p><div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div>');

Answer 2

我在你的代码中发现了一些问题

<强>第一，

请将click事件处理程序放在函数（或）之外，以更改原因，因为对于每个项目，它将绑定此click事件，并在单击任何项目时导致多次调用。

$(document).on('click', '#search-result', function(i, item) {

到

$("#search-result").click(function(evt) {

<强>其次，

对于标题，您需要通过代码管理

将一个属性添加到下面的div

<div class="p1 full-post-text" id="search-result">

attr-index来管理当前的帖子/项目详情

<div class="p1 full-post-text" id="search-result" attr-index="'+i+'">

并在click事件处理程序中使用该属性，然后您可以获取该数据

var ind = $(this).attr("attr-index");
imgTitle = data.posts[ind].title;

Click函数仅显示JSON数组中的一个对象

2 个答案: