Question

问题：我在rails应用程序中实现了一个infinitescroll插件，以及JQuery Masonry。它工作得很好，但我面临一个小问题：从第二页开始，hover函数不会被触发。此问题与Stackoverflow上的此post非常相似。我应该在砌体回调后再次调用我的悬停功能。

我的原始代码：

<script>    
$(function () {
    var $container = $('#container_masonry');

    $container.infinitescroll({
        navSelector: '.pagination'
        nextSelector: '.pagination a',
        itemSelector: '.image_masonry'
        loading: {
        finishedMsg: 'Done loading'
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
        // trigger Masonry as a callback
        function(newElements) {
            //hide new items while loading
            var $newElems = $(newElements).css({ opacity: 0 });
            //images must be loaded completely before adding to layout
            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );  
            });
        }
    );

    $container.imagesLoaded(function(){
        $container.masonry({
        itemSelector: '.image_masonry',
        columnWidth: 10,
        isAnimated: true,
        animationOptions: { duration: 400 },
        isResizable: true,
        isFitWidth: true
        });

        $('.image_masonry').hover(
        function(){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }); 
    });

});
</script>

我应该添加以下内容，

        $('.image_masonry').hover(
        function(){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        });

到了之后，

            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
                //ADD HOVER FCN HERE

但是，简单地添加整个悬停功能不起作用。我是jQuery的新手所以我不完全确定，但我需要传递相关的变量以及它的功能才能工作（从类似的post得到这个提示。所以我应该添加类似的东西

        $('.image_masonry').hover(
        function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        });

但我需要有人教我应该放在那里。我因为缺乏对jQuery的熟悉而苦苦挣扎。我非常感谢你的帮助！

Answer 1

你在第5-11行之间遗漏了一些逗号。此外，如果您稍后要加载外部内容，则需要使用on或delegate委派悬停事件，具体取决于您的版本。我在下面添加了on。

$(function () {
  var $container = $('#container_masonry');

  $container.infinitescroll({
    navSelector: '.pagination',
    nextSelector: '.pagination a',
    itemSelector: '.image_masonry',
    loading: {
      finishedMsg: 'Done loading',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function (newElements) {
    //hide new items while loading
    var $newElems = $(newElements).css({
      opacity: 0
    });
    //images must be loaded completely before adding to layout
    $newElems.imagesLoaded(function () {
      //they are loaded and ready to be showed
      $newElems.animate({
        opacity: 1
      });
      $container.masonry('appended', $newElems, true);
    });
  });

  $container.imagesLoaded(function () {
    $container.masonry({
      itemSelector: '.image_masonry',
      columnWidth: 10,
      isAnimated: true,
      animationOptions: {
        duration: 400
      },
      isResizable: true,
      isFitWidth: true
    });

    $('body').on({
      mouseenter: function () {
        $('.title', this).fadeIn();
        $('.like_num', this).show();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      },
      mouseleave: function () {
        $('.title', this).fadeOut();
        $('.like_num', this).hide();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      }
    }, '.image_masonry');
  });

});

JQuery Infinite Scroll Help - 将变量传递给第二页

1 个答案: