Как я могу сделать так, чтобы моя лента Ajax загружала несколько сообщений WordPress на основе тега div с идентификатором записи?

Question

Я пытаюсь выяснить, как зациклить мой скрипт jQuery / Ajax для загрузки двух записей WordPress на основе каждого идентификатора записи WordPress в теге div, поэтому URL-адрес Ajax загружается на основе тегов идентификатора.

Вы можете увидеть мой пример ниже. Я использую блог WordPress News в качестве примера канала.

https://jsfiddle.net/jdcool279/7L361ru0/17/

Я выяснил, как загрузить один фид на основе идентификатора поста в теге, но я не могу понять, как загрузить два фида через тег div. Чтобы увидеть пример отдельного канала, раскомментируйте тег script внутри скрипки. Кроме того, было бы лучше изменить тег id «fetch_comp_content» на класс вместо идентификатора, так как мне нужно будет включить его дважды?

Загрузка нескольких сообщений по div post-id:

<div class="col-md-6">
<div class="container">
    <div id="fetch_comp_content" post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
    <div id="fetch_comp_content" post-id="6848"></div>
</div>
</div>

Вместо загрузки 1 сообщения через тег script:

<script title="true" id="comp_cont_init" post-id="6810"></script>

Я также хотел бы отметить, что тег script на самом деле загружает скрипт для запуска канала. Я не включил это в свою скрипку, так как хотел показать код JavaScript.

Любая помощь по этому вопросу будет высоко ценится!

Спасибо.

Answer 1

Две быстрые проблемы:

1. Вы не можете повторять идентификаторы на странице, они уникальны по определению.вместо этого используйте класс

2. Вы не делаете запросы в цикле each, где у вас есть доступ к определенным экземплярам элементов и определенным идентификаторам записей из элементов

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

Обратите внимание, что лучше использовать data- атрибуты также

$('.fetch_comp_content').each(function() {
  var $el = $(this),
    postId = $el.data('post-id'),
    urlstring = 'https://wordpress.org/news/wp-json/wp/v2/posts/' + postId;

  $.getJSON(urlstring).then(function(data) {
  
    var title = data.title.rendered
    $el.append('<h3>' + title + '</h3>');
    
  }).catch(function() {
    console.log('Bad request')
  })
});

.fetch_comp_content { border:2px solid #ccc; margin:10px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="container">
    <div class="fetch_comp_content" data-post-id="6810"></div>
  </div>
</div>
<div class="col-md-6">
  <div class="container">
    <div class="fetch_comp_content" data-post-id="6846"></div>
  </div>
</div>