Загрузка одних и тех же API-данных в div и модальный диалог - PullRequest
Новая
       14

Загрузка одних и тех же API-данных в div и модальный диалог

0 голосов
/ 25 марта 2019

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

Я уже пытался загрузить два отдельных запроса как для модальных, так и для 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>

1 Ответ

0 голосов
/ 04 апреля 2019

Идентификатор - «заголовок» на странице и «заголовок» в ответе от первой функции. Однако, если вы сделаете их одинаковыми, вторая переопределит первую (то есть то, что вы вернули из первой функции, будет перезаписано).

...