时间戳

首页 > 解决方案 > 如何使用api在html div中获取图像

javascript - 如何使用api在html div中获取图像

问题描述

我将图像和标题帖子附加到 html，但它对所有元素都重复。我只需要每个图像和标题。

html

<div class="row">
    <div class="col-md-3 text-center get-img" >
      <div class="get-title"></div>
      <p class="text-center"></p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center ">  </p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center">  </p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center"> </p>
    </div>
  </div>

javascript

$(document).ready(function(){
    $.getJSON("https://startupet.com/blog/wp-json/wp/v2/posts? 
    _embed", function(data) {
    console.log(data)
    var pic= '';
    var string = '';
    data.slice(-4).forEach(function(item) {
      pic += `<img src= ${item._embedded["wp:featuredmedia"] 
     [0].source_url}  class="img-fluid img-course"/>`
      string += `<h5 class="text-center m-t-10 b- 
      color">${item.title.rendered}</h5>`

    })
    $(".get-img").append(pic)
    $(".get-title").append(string)
  })
});

///////////////////////////////////////// ///////////

标签： javascriptjqueryhtml

解决方案

试试这个方法

$(document).ready(function () {
            var html = '';

            $.getJSON("https://startupet.com/blog/wp-json/wp/v2/posts?_embed", function (data) {
                console.log(data)

                data.slice(-4).forEach(function (item) {

                    html += ` <div class="col-md-3 text-center get-img">
                        <img src= ${item._embedded["wp:featuredmedia"]
                        [0].source_url}  class="img-fluid img-course"/>
                        <div class="get-title">
                        <h5 class="text-center m-t-10 b-color">${item.title.rendered}</h5></div>
                        <p class="text-center"></p>
                        </div>`
                })
                $(".row").append(html)
            })
        });

HTML

<div class="row">


    </div>

推荐阅读