Question

点击一个toggleClass，对于无限滚动之前加载的内容工作正常，并且在无限滚动后附加到砌体的内容上工作正常，但不再适用于以前加载的内容。

例如// 页面加载

<article></article>
<article></article>
<article></article>

（Toggle Class适用于所有上述文章元素）但随后添加无限滚动和附加砌体加载更多文章元素

<article></article>
<article></article>
<article></article>

（toggleClass可以在上次加载的内容中正常工作，但不能处理页面加载中的文章元素。）如果第三次完成，

<article></article>
<article></article>
<article></article>

（toggleClass在上面工作，初始页面加载的文章元素，但不是中间的元素，这是从无限滚动加载的第一个元素）

我在单击元素时添加和删除ID，因此ScrollTo可以工作，而且似乎一直都能正常工作。所以toggleClass（）有一些东西。

这是.js文件中的代码。

jQuery(window).load( function() {
    /**
    Add ID to Genesis main.content
    */
    jQuery('main.content').attr('id', 'grid');

    /**
        Adding div and class grid-sizer - utility element for Masonry to size correctly
    */
    jQuery('main#grid article:first-of-type').before('<div class="grid-sizer"></div>');

    /**
        Initialize Masonry
    */

    var $container = $('#grid');
    $container.imagesLoaded(function(){
        $container.masonry({
            "itemSelector": "article",
            "columnWidth": ".grid-sizer",
            "animation": "true",
            "isResizable": "true",
        });
    });

    activeArticle();

});

function activeArticle() {

    jQuery('article .entry-content a').click(function(event) {

        event.preventDefault();

        // Add id to clicked articles
        jQuery(this).closest('article').attr('id','active');

        // Add the giant class to resize element
        jQuery(this).closest('article').toggleClass('giant');

        jQuery('#grid').masonry();

        jQuery('#grid').masonry('on','layoutComplete', function( msnryInstance, laidOutItems) {

            jQuery('html, body').animate({
                scrollTop: jQuery('#active').offset().top
            }, 500);

            jQuery('article').removeAttr('id');

        });

    });

}

以下是WordPress Infinite Scroll Plugin的回调函数中的代码。

var $newElems = jQuery(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
jQuery('#grid').masonry( 'appended', $newElems, true );
});
activeArticle();

Answer 1

结束只是编写另一个函数并将其放入回调函数中。这是另一个功能。这看起来像第二，第三，没有问题。

function activeArticleInfinite() {

jQuery('#infscr-loading').nextAll('article').find('img').click(function(event) {

    event.preventDefault();

    // Add id to clicked articles
    jQuery(this).closest('article').attr('id','active');

    // Add the giant class to resize element
    jQuery(this).closest('article').toggleClass('giant');

    jQuery('#grid').masonry();

    jQuery('#grid').masonry('on','layoutComplete', function( msnryInstance, laidOutItems) {

        jQuery('html, body').animate({
            scrollTop: jQuery('#active').offset().top
        }, 500);

        jQuery('article').removeAttr('id');

    });

});

}

无限滚动和砌体加载后的toggleClass奇怪的行为

1 个答案: