1

問題: Rails アプリに infinitescroll プラグインを JQuery Masonry と共に実装しました。それは完全に機能しますが、私は 1 つの小さな問題に直面しています: 2 ページ目から開始すると、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 に答える