向InstafeedJS添加"Show Less“按钮
使用InstafeedJS，我希望能够添加一个按钮来隐藏在初始提要之后加载的任何内容(例如，用户单击了Show More一次或多次)。我最初的想法是向其他提要项添加一个类或数据标记，然后用一个自定义按钮隐藏它们。但我不确定如何通过脚本添加这些引用。有什么想法吗？
当前代码：
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();回答 2
Stack Overflow用户
发布于 2018-10-09 09:37:24
虽然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();(附注:因为我只为你"JQueryified“，所以接受他的答案，而不是我的答案。)
Stack Overflow用户
发布于 2018-10-05 11:34:20
您可以通过脚本添加引用或在加载的元素上添加自定义数据属性(有多种方法可以实现您想要的效果)，但在我看来，您可以使用CSS选择器来选择在初始提要之后加载的所有元素，并应用某些样式(隐藏)它们，如下面的代码片段所示。
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')之后按下它时，提要中以前加载的所有图像也都可见。
希望能有所帮助。
https://stackoverflow.com/questions/52591671
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号