Javascript 加上“；“显示得更少”；InstafeedJS的按钮

使用InstafeedJS，我希望能够添加一个按钮，隐藏在初始提要之后加载的任何内容（例如，用户已单击“显示”一次或多次）。我最初的想法是向附加提要项添加一个类或数据标记，然后使用自定义按钮隐藏它们。但我不知道如何通过脚本添加这些引用。有什么想法吗

当前代码：

      var loadButton = document.getElementById('instafeed-loadmore');

      var feed = new Instafeed({
          get: 'user',
          type: 'image',
          limit: '5',
          sortBy: 'most-recent',
          resolution: 'standard_resolution',
          userId: <?php echo $instagram_id; ?>,
          accessToken: '<?php echo $instagram_token; ?>',
          template: '<li><span class="instagram-post" data-url="{{link}}" data-modal="instagram-popup" data-caption="{{caption}}" data-image="{{image}}" style="background-image: url({{image}});"></span></li>',
          after: function() {
              if (!this.hasNext()) {
                  loadButton.setAttribute('disabled', 'disabled');
              }
          }
      });

      loadButton.addEventListener('click', function() {
          feed.next();
      });

      feed.run();

var loadButton=document.getElementById（'instafeed-loadmore'）；
var feed=新Instafeed({
获取：“用户”，
键入：“图像”，
限制：“5”，
脏话：“最近的”，
决议：“标准决议”，
用户ID:，
accessToken:“”，
模板：“
”，
之后：函数（）{
如果（！this.hasNext（））{
loadButton.setAttribute（'disabled'，'disabled'）；
}
}
});
loadButton.addEventListener（'单击'，函数（））{
feed.next（）；
});
feed.run（）；

您可以通过脚本添加引用，也可以在加载的元素上添加自定义数据属性（有多种方法可以实现您的目的），但我认为您可以使用CSS选择器选择初始提要之后加载的所有元素，并应用一些样式（隐藏），如下面的代码段所示

var限值=4；
var feed=新Instafeed({
目标：“instafeed”，
获取：“用户”，
键入：“图像”，
脏话：“最近的”，
极限：极限，
决议：“标准决议”，
用户ID:，
accessToken:“”，
模板：“”，
之后：函数（）{
如果（！this.hasNext（））{
$（'btnMore'）.attr（'disabled'，'disabled'）；
}
}
});
$（'btnMore'）。在（'click'，函数（e）上{
$（“.instagram帖子：第n个子项（n+”+（1+限制）+”）.show（）；
feed.next（）；
});
$（'btnLess'）。在（'click'，函数（e）上{
$（“.instagram帖子：第n个子项（n+”+（1+限制）+”）.hide（）；
});
feed.run（）
.instagram post{
宽度：100px；
高度：100px；
显示：内联块；
利润率：15px；
}

加载更多。。。
少显示…
虽然Dipen的答案很好，因为您似乎没有使用jQuery，这里是标准Js

var limit = 4;
var feed = new Instafeed({
  target: 'instafeed',
  get: 'user',
  type: 'image',
  sortBy: 'most-recent',
  limit: limit,
  resolution: 'standard_resolution',
  userId: <?php echo $instagram_id; ?>,
  accessToken: '<?php echo $instagram_token; ?>',
  template: '<img class="instagram-post" src={{image}} />',
  after: function() {
    if (!this.hasNext()) {
      document.getElementById('btnMore').attr('disabled', 'disabled');
    }
  }
});

document.getElementById('btnMore').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").show();
  feed.next();
});

document.getElementById('btnLess').on('click', function(e) {
  document.getElementsByClassName("instagram-post:nth-child(n+" + (1 + limit) + ")").hide();
});

feed.run();

var限值=4；
var feed=新Instafeed({
目标：“instafeed”，
获取：“用户”，
键入：“图像”，
脏话：“最近的”，
极限：极限，
决议：“标准决议”，
用户ID:，
accessToken:“”，
模板：“”，
之后：函数（）{
如果（！this.hasNext（））{
document.getElementById（'btnMore'）.attr（'disabled'，'disabled'）；
}
}
});
document.getElementById（'btnMore'）。on（'click'，函数（e）{
document.getElementsByClassName（“instagram帖子：第n个子项（n+”+（1+限制）+”））.show（）；
feed.next（）；
});
document.getElementById（'btnLess'）。on（'click'，函数（e）{
document.getElementsByClassName（“instagram帖子：第n个子项（n+”+（1+限制）+”））.hide（）；
});
feed.run（）；

（另一方面，我只是为你取消了“JQueryified”，接受他的答案，而不是我的。）