0 
<script>
$(window).load(function () {
    var $wall = $('#content');
    $wall.imagesLoaded(function () {
        $wall.masonry({
            itemSelector: '.oddpost',
        isAnimated: true
    });
    $(".oddpost").each (function (idx, el) {   
     if ($(el).position().left < $(el).width()) {
      $('.rightarrow', el).show();
     }
     else {
      $('.leftarrow', el).show();
     }
 });
});

$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.oddpost',
    loadingImg: "http://static.tumblr.com/qrevc1p/WTKlx2dsg/gsnjnwui-um.gif",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: true,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');    
        });
    });
  });
$('#content').show(500);
  });
  </script>

そのスクリプトを Tumblr テーマで使用して、石積みと無限スクロールを適用しています。これは 2 列のレイアウトなので、div は左または右にのみ移動します。また、テーマに石積みを適用する以外に、div には左に向かう矢印 (.rightarrow) と、右に向かう矢印には別の矢印 (.left arrow) も配置されます。

これまでのところ、すべてが正常に機能しています。私の問題は、次のページが読み込まれたときに始まります。どうやら、矢印コードは最初のページにのみ適用され、新しく追加された要素には適用されないようです。コードのさまざまな部分で矢印コードを繰り返してみましたが、うまくいきませんでした。それは本当に私を混乱させ始めています。私はjQueryを初めて使用するわけではありませんが、これを機能させるのに本当に苦労しています。

新しく追加されたdivにも適用されるように、矢印コードを配置する必要がある部分を誰か教えてもらえますか?

4

1 に答える 1

1

矢印がページに追加された後、矢印を表示するコードを実行する必要があります。

コピー/貼り付けを避ける機能を使用することをお勧めします。

/**
 * Shows the appropiate arrow for a given element.
 */
function showArrowOn(el) {
  if ($(el).position().left < $(el).width()) {
    $('.rightarrow', el).show();
  } else {
    $('.leftarrow', el).show();
  }
}

$(window).load(function () {
  ...
  $(".oddpost").each(function (idx, el) { 
     // Using function to show the arrows on the items at window load.
     showArrowOn(el); 
  }
}

$wall.infinitescroll({
  ...
  $newElems.imagesLoaded(function () {
    $wall.masonry('appended', $newElems, {
      ...
      }, function () { 
        // Show the arrows once the new elems are appended.
        $newElems
          .fadeIn('slow')
          .each(function () { showArrowOn(this); });
      });

});

新しい要素に矢印を表示するためのロジックに問題がある可能性があります。これは、jQueryに位置と幅（cssによって異なります）を要求したときに矢印が表示されないためです。問題がある場合は、次のことを試してください。

$newElems.fadeIn('slow', function () { showArrowOn(this); });

アイテムが表示されたときに表示する矢印を計算します。

于 2012-01-07T07:41:07.950 に答える