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

时间:2019-03-25 15:02:38

标签: javascript ajax api bootstrap-modal each

我正在尝试将新闻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 :(得分:0)

该ID在页面上是“标题”,在第一个函数的返回中是“标题”。但是,如果使它们相同,则第二个将覆盖第一个(这意味着从第一个函数返回的内容将被覆盖)。