Question

我通过Ajax＆amp; amp;引入JSON数据jQuery的。我已经加载了数据，对象如下 -

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

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

但我得到的是 - 在我点击的每个链接上，它显示相同的CONTENT对象，无论如何。

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

我真的很感激帮助。否则我可能会把头发撕掉。

$.ajax({
    type: 'GET',
    url: 'data.json',
    data: {
        get_param: 'value'
    },
    dataType: 'json',
    success: function (data) {
        $.each(data, function (i, element) {
            var link = $('.more-link');
            var cont = "<div class='content'>" + data[i].content + "</div>";
            var back = "<a class='back' href='http://localhost:8888/postPopulate/Feb21.8.23AM'>BACK</a>";
            var thumb = "<img class='thumb' src=" + data[i].thumbnail + ">";
            var title = "<h1 class='title'>" + data[i].title + "</h1>";
            var exc = "<p class='excerpt'>" + data[i].excerpt + "</p>";
            var perma = JSON.stringify(data[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);
            console.log(perma);

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

            $('body').append(title);
            $('body').append(thumb);
            $('body').append(exc);
        }); //END OF FOR LOOP
    } //END OF SUCCESS FUNC
}); //END OF AJAX

JSON示例

[{
    "id": 58543,
    "title": "Art@Almenkerk brings contemporary art to the wine estate",
    "permalink": "http:\/\/www.capetownetc.com\/blog\/artalmenkerk-brings-contemporary-art-wine-estate\/",
    "content": "With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it...",
    "excerpt": "With its spectacular views and award-winning wine, a trip to Almenkerk Wine Estate in Elgin is well worth it...",
    "date": "2017-02-20 10:00:34",
    "author": "Annzra Denita",
    "thumbnail": "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",
    "categories": ["blog", "CULTURE"],
    "tags": ["art", "arts", "cape town etc", "capetown etc", "CapeTownEtc", "culture", "elgin", "getaways", "sculpture", "wine"]
  },
  //...
]

更新 -

＆＃13;

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    <title>Rugby Thumbnails</title>
    <link href="css/styles.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/main2.js"></script>
</head>
    
<body>

    
</body>
</html>

＆＃13;

当我点击链接时，它只显示content1

Answer 1

点击链接

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

应该在ajax成功函数之外，因为在每个循环绑定点击事件中多次给它。这是错误的。你需要在“more-link”点击上给出父级参考，找到它的兄弟“.content”把它作为html，然后找到它的兄弟“.back”并将其附加到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事件发生问题，您可以搜索动态生成的元素上的click事件作为动态添加到DOM的元素。

JSON数组未在链接点击

1 个答案: