Javascript Instagram api不工作

我对使用api和javascript知之甚少。 （我是一名html/css编码员）

我被要求使用此API获取instagram图片 用户使用特定的标签发布

下面是JSFIDLE共享的演示

$（函数（）{
// 「表示」を押すと、画像を取得します
var端点https://tagplus.jp/demo/api/json/medias';
// ポップアップ用の関数
var popup=功能（项目）{
var$container=$（“”，{'class'：'popup container'}）；
$（''，{'class'：'popup overlay'}）.appendTo（$container）；
var$template=$（$（'#弹出式模板'）.html（）；
$template.find（'.popup image'）.attr（'src'，item.images.standard_分辨率）；
var userLink=https://instagram.com/'+item.media_user.username；
$template.find（'.user link'）.attr（'href'，userLink）；
$template.find（“.profile图片”）
.attr（'src'，item.media\u user.profile\u picture）；
$template.find（'.media用户名'）.text（item.media_user.username）；
$template.appendTo（$container）；
$（'body'）。追加（$container）；
$container.fadeIn（）；
};
$（文件）(
“点击”，
“.popup overlay”，
职能（e）{
e、 预防默认值（）；
$（'.popup container'）.fadeOut(
“快”，
函数（）{
$（this.remove（）；
}
);
}
);
$（“按钮”）。单击（函数（）{
$（“#缩略图”）.text（“”）；
美元(
终点，
{计数：12}，
功能（res）{
forEach资源数据（功能（项目）{
变量$thumb=$（'
在我的例子中，我被要求使用这个API地址。
（其名称为）

首先，我简单地复制并粘贴了这个JSFIDLE代码
下载到我的本地文件，但当我单击按钮加载instagram图片时，它不起作用

这是我的演示
id:测试
通行证：ny2016

为什么它不起作用？我如何修复它

谢谢你抽出时间！
（在我的情况下，我被要求使用此API地址。）
编辑：看起来您的脚本与小提琴中的脚本完全不同。请将您的脚本替换为小提琴中的脚本，然后重试


旧答案：

这是因为您没有jQuery

将此添加到头部的某个位置，然后重试

谢谢你的回复。我太蠢了。但是我添加了jquery，它仍然不起作用……你能在更新演示让我看看吗？非常感谢你的帮助！我刚刚更新了！请检查！
$(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();
        }
      );
    }
  });
});