将相同的api数据加载到div和模态对话框中

Question

我正在尝试将数据从新闻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>

Answer 1

id是页面上的“标题”和第一个函数返回的“标题”。但是，如果你使它们相同，第二个将覆盖第一个（意味着你从第一个函数返回的内容将被覆盖）。