1

问题：我在我的 rails 应用程序中实现了一个无限滚动插件，以及 JQuery Masonry。它运行良好，但我面临一个小问题：从第二页开始，该hover功能没有被触发。这个问题与Stackoverflow 上的这篇文章非常相似。我应该在 Masonry 回调之后再次调用我的悬停函数。

我的原始代码：

<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 新手，所以我不完全确定，但我需要将相关变量连同函数一起传递以使其工作（从类似的帖子中得到这个提示。所以我应该添加类似的东西

        $('.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 不熟悉，我正在苦苦挣扎。非常感谢您的帮助！

4

1 回答 1

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');
  });

});
于 2013-01-10T08:37:55.243 回答