向 InstafeedJS 添加“少显示”按钮答案

【问题标题】：Add a "Show Less" button to InstafeedJS向 InstafeedJS 添加“少显示”按钮
【发布时间】：2019-03-06 14:18:50
【问题描述】：

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

【问题讨论】：

标签： javascript instagram instafeedjs

【解决方案1】：

虽然 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”为你接受他作为答案，而不是我的。）

【讨论】：

【解决方案2】：

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

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()) {
      $('#btnMore').attr('disabled', 'disabled');
    }
  }
});

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

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

feed.run();

.instagram-post {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 15px;
}

<div id="instafeed"></div>

<button id="btnMore">Load More...</button>
<button id="btnLess">Show Less...</button>

根据需要修改代码。

解释：

在$('#btnLess') 的点击事件处理程序中，我从索引limit + 1 中选择所有具有.instagram-post 类的图像并隐藏它们。

在$('#btnMore') 的点击事件处理程序中，我确保提要中的所有可用图像都是可见的，这样每当我在按下$('#btnLess') 后按下它时，提要中所有先前加载的图像也都是可见的。

希望对你有帮助。

【讨论】：