javascript - Instafeed.js 上一个按钮

Question

这是我的问题。我正在尝试让我网站的 Instagram feed 正常工作。它是 Instafeed.js。我正在尝试让上一个按钮起作用。我见过一个例子，其中“上一个按钮”与 Instafeed.js 一起使用:http://codepen.io/stevenschobert/pen/iHxfw 。

在我当前的网站上，我获取了 Instagram 照片，并且我的下一个按钮可以工作，但我的上一个按钮不起作用，并且似乎存在 JavaScript 错误。例如，如果我使用 CSS，例如:

#instafeed img:hover {opacity: .3;}

它工作得很好，但如果我使用 jQuery，它就不起作用了。如:

$(‘#instafeed img’).click(function(){
    $(this).css(“opacity”, .3);
});

这是我用来访问 Instafeed.js 的 JavaScript 代码:

            var instaInfo = '<span class="text"><p><b>{{likes}} &hearts;</b> Likes <br> {{comments}} Comments</p><a class="fancybox" href="{{link}}" target="_blank"><img src="{{image}}" /></a></span>';

            var loadButton = document.getElementById('load-more');
            var feed = new Instafeed({
                get: 'tagged',
                tagName: 'signalcity',
                clientId: '528ab0876c9f4db8889acc36da952b4f',
                limit: 4,
                links: 'true',
                resolution: 'standard_resolution',
                template: instaInfo,
                sortBy: 'most-recent',
                after: function() {
                    if (!this.hasNext()) {
                        loadButton.setAttribute('disabled', 'disabled');
                    }
                }
            });

            feed.run();

这是我的下一个和上一个按钮:

            $('.next').click(function(){
                $('#instafeed img, .text p').hide();
                feed.next();
            });
            $('.prev').click(function(){
                $('#instafeed img, .text p').hide();
                feed.previous();
            });

这是 HTML:

    <div id="instafeed"> 
        <div id="instaClick">
            <a class="next"><h5>NEXT >></h5></a>
            <a class="prev"><h5><< PREVIOUS</h5></a>
        </div>
    </div>

提前致谢!

Answer 1

加载 instagram feed 后就应该注册您的事件处理程序，因为您的 <img>元素被动态加载并附加到 #instafeed包装器，然后在页面加载时不会注册任何事件。

可以使用 after 注册您的事件feed 元素的选项:

var feed = new Instafeed({
    get: 'tagged',
    tagName: 'signalcity',
    clientId: '528ab0876c9f4db8889acc36da952b4f',
    limit: 4,
    links: 'true',
    resolution: 'standard_resolution',
    template: instaInfo,
    sortBy: 'most-recent',
    after: function() {
      if (!this.hasNext()) {
        loadButton.setAttribute('disabled', 'disabled');
      }
      $( "#instafeed img" ).mouseover(function() {
        $( this ).css( "opacity", .3 );
      });
      $( "#instafeed img" ).mouseout(function() {
        $( this ).css( "opacity", 100 );
      });
    }
});