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

【问题标题】：Loading same api data into div and modal dialog将相同的 api 数据加载到 div 和模态对话框中
【发布时间】：2019-08-15 20:50:43
【问题描述】：

我正在尝试将新闻 API 中的数据加载到 div 和链接模式中，以便当用户单击 div 时，将显示有关该特定新闻文章的更多信息。我目前将数据加载到 div 中，但是单击时会为每篇文章打开相同的模式，而不是单击的特定文章。

我已经尝试为 modal 和 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>

【问题讨论】：

标签： javascript ajax api bootstrap-modal each

【解决方案1】：

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

【讨论】：