JSON Array не отображает правильный контент по ссылке нажмите

Я привожу данные JSON через Ajax & JQuery. Я загрузил данные и объекты являются -JSON Array не отображает правильный контент по ссылке нажмите

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

Я пытаюсь отобразить каждый объект отдельно СОДЕРЖАНИЯ основанный на ссылке, которую вы щелкнули. Поэтому, если ссылка имеет определенный идентификатор, тогда отобразится объект CONTENT в массиве THAT.

Но то, что я получаю, - на каждой ссылке, которую я нажимаю, отображает тот же объект 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": "[email protected] 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"] 
    }, 
    //... 
]

ОБНОВЛЕНИЕ -

<!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>

Когда я нажимаю на ссылку, он только отображает Content1

источник

2017-02-21 Anonymous

Я думаю, что код CSS не имеет никакого значения здесь, также 'script' тег в HTML коде, не должна быть в' head' раздел? (Это даже за пределами '') – niceman

Да, вы можете Посмотрите мимо этого. Кажется, он не снаружи. Я понимаю, что вы говорите, но скрипту не нужны какие-либо элементы в HTML, поэтому он не имеет отношения к проблеме. Спасибо за ответ, хотя. –

Вы подтвердили, что сервер возвращает ожидаемый ответ json? он возвращает разные контенты для каждой ссылки? (вы можете видеть, что с помощью инструментов разработчика вашего браузера) – niceman

Ваша ссылка нажмите

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

должен быть вне АЯКС функции успеха, как давать ее в каждом цикле связывания событий нажмите несколько раз. это неверно. Вам нужно указать родительскую ссылку на ссылку «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); 
       });

Вы можете искать для придания события нажатия на динамически генерируемый элемент, если проблема возникает в случае щелчка, как ваш добавления элемента динамически DOM.

источник

2017-02-21 18:00:42

Благодарим вас за ответ! Я вставил HTML, не уверен, почему он не добавил в первый раз. Но если я выберу функцию щелчка из вызова ajax, как Data, так и i не определены, потому что вызов ajax не является глобальным. Я не знаю, как это исправить. –

Вам не нужно удалять код $ (каждый). вам нужно только поставить $ (link) .click (function()) вне вашей айакс-колла и положить непосредственно в документ.ready() и изменить его, как я предложил в ответ. –

JSON Array не отображает правильный контент по ссылке нажмите

ответ

Смежные вопросы