Question

关于使用api，javascript的知识很少。（我是一名html / css编码员）

我已被要求使用此API获取Instagram照片用户使用特定主题标签发布的内容。

这里是jsfiddle分享的演示 http://jsfiddle.net/j9ynxvox/10/

$(function() {
  // 「表示」を押すと、画像を取得します
  var endpoint = 'https://tagplus.jp/demo/api/json/medias';

  // ポップアップ用の関数
  var popup = function(item) {
    var $container = $('<div>', {'class': 'popup-container'});
    $('<div>', {'class': 'popup-overlay'}).appendTo($container);

    var $template = $($('#popup-template').html());
    $template.find('.popup-image').attr('src', item.images.standard_resolution);
    var userLink = 'https://instagram.com/' + item.media_user.username;
    $template.find('.user-link').attr('href', userLink);
    $template.find('.profile-picture')
             .attr('src', item.media_user.profile_picture);
    $template.find('.media-user-name').text(item.media_user.username);
    $template.appendTo($container);

    $('body').append($container);
    $container.fadeIn();
  };

  $(document).on(
    'click',
    '.popup-overlay',
    function(e) {
      e.preventDefault();
      $('.popup-container').fadeOut(
        'fast',
        function() {
          $(this).remove();
        }
      );
    }
  );

  $('button').click(function() {
    $('#thumbnail').text('');
    $.get(
      endpoint,
      {count: 12},
      function(res) {
        res.data.forEach(function(item) {
          var $thumb = $('<img>', {
            'class': 'insta-thumb',
            src: item.images.thumbnail
          });
          $thumb.appendTo($('#thumbnails'));
          $thumb.click(function(e) {
            e.preventDefault();
            popup(item);
          });
        });
      },
      'jsonp'
    );
  });

  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      $('.popup-container').fadeOut(
        'fast',
        function() {
          $(this).remove();
        }
      );
    }
  });
});

就我而言，我被要求使用此API地址。 https://tagplus.jp/plazastyle_Campaign/api/json/medias （称为http://tagplus.jp/）

首先，我只是复制并粘贴了这个jsfiddle代码到我的本地文件但是当我点击按钮加载instagram图片时它无法正常工作。

这是我的演示 http://1ne-studio.com/test2/sample.html id：测试通过：ny2016

为什么它不起作用，我该如何解决这个问题呢？

感谢您的时间！（就我而言，我已被要求使用此API地址。https://tagplus.jp/plazastyle_Campaign/api/json/medias）

Answer 1

编辑：所以看起来你的剧本与小提琴中的剧本完全不同。将您的脚本替换为小提琴中的脚本，然后重试！

旧回答：

这是因为你没有jQuery！

将其添加到头部的某处，然后重试

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Instagram api不起作用

1 个答案: