Question

我怎样才能做到这一点：

<span data-instagram="https://www.instagram.com/p/BNnmcIVgNLy/?taken-by=nba"></span>
<span data-instagram="https://www.instagram.com/p/BNlZYpDgwr_/?taken-by=nba"></span>
<span data-instagram="https://www.instagram.com/p/BNlTnGFAqQ4/?taken-by=nba"></span>
<span data-instagram="https://www.instagram.com/p/BNlFOilgZ3b/?taken-by=nba"></span>

如何使用属性搜索所有span元素：data-instagram，并使用它来提取instagram图像thumbnail_url，并将找到的所有图像添加到某个div中。

这样的事情：

$.getJSON ({
    method: 'GET',
  url: 'https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba',
  dataType: 'jsonp',
  success: function (response) {
    $('.nekiDiv').append('<img src="'+response.thumbnail_url+'">');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nekiDiv">

</div>

您也可以在此处查看：https://jsfiddle.net/ag53dm61/

Answer 1

首先，您无法使用直接网址，您需要使用instagram api网址，

然后你可以使用js代码：

$("[data-instagram]").each(function(el) {
  $.getJSON({
    method: 'GET',
    url: $(this).data("instagram"),
    dataType: 'jsonp',
    success: function(response) {
      $('.nekiDiv').append('<img src="' + response.thumbnail_url + '">');
    }
  });
})

示例Fiddle

您需要在HTML中使用nekiDiv创建一个div。

并将第一个示例网址视为"https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba"

Answer 2

（我明白为什么你现在不能使用img：你还没有指向实际缩略图的链接;你必须通过Instagram API来获取它们第一。）

您可以使用jQuery选择具有span属性的每个data-instagram：

$('span[data-instagram]')

然后，对于找到的每个元素，您可以模仿链接到查询Instagram API的小提琴中的功能。请求成功后，您可以使用回调函数将相应的缩略图图像插入每个span。

查看this JSFiddle。

（StackOverflow片段似乎无法启动跨源请求。）

＆＃13;

$('span[data-instagram]').each(function(i, span) {
  $.getJSON({
    method: 'GET',
    url: 'https://api.instagram.com/oembed/?url=' + span.getAttribute('data-instagram'),
    dataType: 'jsonp',
    success: function(response) {
      var img = document.createElement('img');
      img.src = response.thumbnail_url;
      span.appendChild(img)
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <span data-instagram="https://www.instagram.com/p/BNnmcIVgNLy/?taken-by=nba"></span>
  <span data-instagram="https://www.instagram.com/p/BNlZYpDgwr_/?taken-by=nba"></span>
  <span data-instagram="https://www.instagram.com/p/BNlTnGFAqQ4/?taken-by=nba"></span>
  <span data-instagram="https://www.instagram.com/p/BNlFOilgZ3b/?taken-by=nba"></span>
</div>

＆＃13;

从url获取元素属性和JSON

2 个答案: