Jquery JSON数组在单击链接时未显示正确的内容

我通过Ajax和Jquery引入JSON数据。我已经加载了数据，对象如下-

ID,
TITLE,
PERMALINK,
CONTENT, 
ETC.(The rest is not important)

我试图根据您单击的链接分别显示每个内容对象。因此，如果链接具有特定ID，则该数组中的内容对象将显示

但我得到的是——在我点击的每个链接上，无论发生什么，它都会显示相同的内容对象

我附上了代码片段供您查看，希望您能看到问题所在，因为我绝对不能

我真的很感激你的帮助。否则我可能会把头发扯下来

$.ajax({
键入：“GET”，
url:'data.json'，
数据：{
获取参数：“值”
},
数据类型：“json”，
成功：功能（数据）{
$。每个（数据、函数（i、元素）{
var link=$（'.more link'）；
var cont=“”+数据[i]。内容+”；
var back=“”；
var thumb=“”；
var title=”“+数据[i]。title+“”；
var exc=“
”+数据[i]。摘录+”
”；
var perma=JSON.stringify（数据[i].permalink）；
perma=perma.replace（“http://www.capetownetc.com/blog/", "");
perma=perma.replace（“http://www.capetownetc.com/events/", "");
perma=perma.replace（“http://www.capetownetc.com/mykitchen/", "");
$（link）.attr（“href”http://localhost:8888/postPopulate/Feb21.8.23AM/#“+perma）；
控制台日志（perma）；
$（链接）。单击（函数（）{
$（'body'）.html（续）；
$（'body'）。追加（返回）；
});
$（'body'）。追加（标题）；
$（'body'）。追加（拇指）；
$（'body'）。追加（exc）；
})；//FOR循环的结束
}//成功结束FUNC
}); //AJAX的终结

JSON示例

[{
“id”：58543，
“标题”：Art@Almenkerk将当代艺术带入葡萄酒庄园“，
“permalink”：“http:\/\/www.capetownect.com\/blog\/artalmenkerk带来当代艺术葡萄酒庄园\/”，
“内容”：“凭借其壮观的景色和屡获殊荣的葡萄酒，前往埃尔金的阿尔门克葡萄酒庄园是非常值得的……”，
“摘录”：“凭借其壮观的景色和屡获殊荣的葡萄酒，前往埃尔金的阿尔门克葡萄酒庄园是非常值得的……”，
“日期”：“2017-02-20 10:00:34”，
“作者”：“安兹拉·德尼塔”，
“缩略图”：“http:\/\/www.capetownetc.com\/wp content\/uploads\/2017\/02\/Almenekerk-FI.jpg 650w，http:\/\/www.capetownetc.com\/wp content\/uploads\/2017\/02\/Almenekerk-FI-600x400.jpg 600w”，
“类别”：[“博客”、“文化”]，
“标签”：[“艺术”、“艺术”、“开普敦等”、“开普敦等”、“开普敦等”、“文化”、“埃尔金”、“出游”、“雕塑”、“葡萄酒”]
},
//...
]

更新-

橄榄球缩略图

点击链接

 $(link).click(function () {
                $('body').html(cont);
                $('body').append(back);
            });

应该在ajax成功函数之外，因为在每个循环中多次给它绑定单击事件。这是错误的。 您需要在“更多链接”上提供父引用，单击并查找其同级。内容“将其作为html，然后查找其同级”。返回并将其附加到html

你的代码链接点击应该是这样的

$("body").on("click",".more-link",function () {
var content = $(this).siblings(".content");
var back = $(this).siblings(".back");
                    $('body').html(content);  // it may be differ based on your html structure
                    $('body').append(back);
                });

---

如果click event作为动态向DOM添加元素出现问题，您可以在动态生成的元素上搜索give click event。

我认为css代码在这里是不相关的，html代码中的

脚本
标记也是不相关的，它不应该在
head
部分吗？（它甚至在
之外）是的，你可以看过去。好像不在外面。我理解你的意思，但是脚本不需要HTML中的任何元素，所以它与问题无关。谢谢你的回复。你确认服务器返回了你期望的json响应了吗？它是否为每个链接返回不同的内容？（你可以看到，使用浏览器的开发工具）是的，我返回了，如果我在控制台上记录并检查网络，我就得到了我想要的。我可以发送console.log的截图。谢谢你的回复！我已经插入了HTML，不知道为什么第一次没有添加。但是如果我将click函数从ajax调用中去掉，那么Data和I都是未定义的，因为ajax调用不是全局的。我不确定如何更正此问题。您不需要删除$（每个）代码。您只需要将$（link）放在ajax调用的外侧，单击（function（））并直接放在document.ready（）中，然后修改它，就像我在回答中建议的那样。