Question

<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主题上使用该脚本我正在努力应用砌体和无限滚动。这是一个两列布局，所以div只能向左或向右。除了在主题上应用砖石外，它还在向左侧的div上放置一个箭头（.rightarrow），向右侧放置一个不同的箭头（.left箭头）。

到目前为止，所有这一切都正常。我的问题在加载下一页时开始。显然，箭头代码仅适用于第一页，但不适用于新添加的元素。我已经尝试在代码的不同部分迭代箭头代码，但我没有运气。这真的开始让我困惑。我不是jQuery的新手，但是我真的很难尝试这项工作。

任何人都可以告诉我应该把箭头代码放在哪一部分，以便它也适用于新添加的div？

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

计算项目可见后显示的箭头。

jQuery砌体和无限滚动问题

1 个答案: