javascript – 向InstafeedJS添加“显示更少”按钮

2023年1月24日 269次阅读

使用InstafeedJS,我希望能够添加一个按钮,该按钮隐藏在初始订阅源之后加载的任何内容(例如,用户单击“显示更多”一次或多次).我最初的想法是为其他Feed项添加一个类或数据标记,然后使用自定义按钮隐藏它们.但我不确定如何通过脚本添加这些引用.有任何想法吗？

当前代码：

      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();

最佳答案 虽然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();

(P.S.因为我只是“JQueryified”它,你接受他作为答案,而不是我的答案.)

点赞