gpt4 book ai didi

javascript - 向 InstafeedJS 添加一个 "Show Less"按钮

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:24:15 25 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - 向 InstafeedJS 添加一个 "Show Less"按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52591671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com