Блог

Я пытаюсь загрузить данные из новостного API как в div, так и в связанный модальный, чтобы, когда пользователь нажимает на div, отображалась дополнительная информация об этой конкретной новостной статье. В настоящее время у меня есть загрузка данных в divs, но при нажатии открывается один и тот же модальный файл для каждой статьи, а не для конкретной выбранной статьи.

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

JAVASCRIPT

 $.each(data, function(key,value){                 

      var output = '<div class="row">';

      for (var i = 0; i < 6; i  ) {

        output  ='<div class="col-md-4 col-sm-6 portfolio-item">'; 
        output  = '<a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">' '<div class="portfolio-hover">' '<div class="portfolio-hover-content">' '<i class="fas fa-plus fa-3x">' '</i>' '</div>' '</div>' '<img class="img-fluid img-fluid d-block mx-auto" src="'  data.articles[i].urlToImage  '" alt="">' '</img>' '</a>' '<div class="portfolio-caption">' '<h4>'  data.articles[i].title  '</h4>' '<p class="text-muted">'  data.articles[i].description  '</p>' '<p>' '<a href="'  data.articles[i].url '" target="_blank">Full story</a>' '</p>' '</div>';  
        output  = '</div>';

     }
        output  = '</div>'; // End row

      $('#headlines').html(output);
    }); 

    $.each(data, function(key,value){                 

      var output = '<div class="row">';

      for (var i = 0; i < 6; i  ) {

        output  = '<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">';
        output  = '<div class="modal-dialog">' '<div class="modal-content">';
        output  = '<div class="close-modal" data-dismiss="modal">';
        output  = '<div class="lr">' '<div class="rl">' '</div>' '</div>';
        output  = '</div>';
        output  = '<div class="container">';
        output  = '<div class="col-lg-8 mx-auto">';
        output  = '<div class="modal-body">';
        output  = '<h2 class="text-uppercase">'   data.articles[i].title   '</h2>' '<p class="item-intro text-muted">' 'Lorem ipsum dolor sit amet consectetur.' '</p>' '<img class="img-fluid d-block mx-auto" src="img/portfolio/01-full.jpg" alt="">' '<p>' 'description' '</p>' '<ul class="list-inline">' '<li>' 'Date: January 2017' '</li>' '<li>' 'Client: Threads' '</li>' '<li>' 'Category: Illustration' '</li>' '</ul>' '<button class="btn btn-primary" data-dismiss="modal" type="button">' '<i class="fas fa-times">' '</i>' 'Close Project' '</button>';
        output  = '</div>' '</div>' '</div>' '</div>' '</div>' '</div>';

     }
        output  = '</div>'; // End row

      $('#headline').html(output);
    }); 
  

HTML

         <div class="row">
          <div id="headline">

          </div>
        </div>
  

Идентификатор — это ‘headline’ на странице и ‘headlines’ в возврате из первой функции. Однако, если вы сделаете их одинаковыми, вторая функция переопределит первую (это означает, что то, что вы вернули из первой функции, будет перезаписано).