同位素在页面上加载的次数更多

时间:2019-01-29 16:32:41

标签: javascript jquery jquery-isotope isotope

我正在使用WordPress短代码来显示自定义帖子。每个简码都包含相同的HTMLclasses,只是数据发生了变化。

我正在使用同位素load more分页。这是我的JavaScript

 function initIsotope($) {
    $container = $('.social-posts-grid').isotope({
        itemSelector: '.social-post',
        percentPosition: true,
        masonry: {
            columnWidth: '.grid-sizer',
            gutter: 20,
            horizontalOrder: true
        }
    });

    $(".iso-filter a").click(function() {
        $(this).data('clicked', true);
        var filterValue = $(this).attr('data-filter');
        $('.social-posts-grid').isotope({
            filter: filterValue
        });
        loadMore(initShow);
    });

    //****************************
    // Isotope Load more button
    //****************************
    var initShow = script_vars.page_slug === 'social-page' ? 3 : 10; //number of items loaded on init & onclick load more button
    var counter = initShow; //counter for load more button
    var iso = $container.data('isotope'); // get Isotope instance
    loadMore(initShow); //execute function onload

    function loadMore(toShow) {
        $container.find(".hidden").removeClass("hidden");

        var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
            return item.element;
        });
        $(hiddenElems).addClass('hidden');
        $container.isotope('layout');

        //when no more to load, hide show more button
        if (hiddenElems.length == 0) {
            jQuery("#load-more").hide();
        } else {
            jQuery("#load-more").show();
        };

    }

    //append load more button
    $container.after('<button id="load-more" class="social-load-more"> Load More</button>');

    //when load more button clicked
    $("#load-more").click(function() {
        if ($('#filters').data('clicked')) {
            //when filter button clicked, set initial value for counter
            counter = initShow;
            $('#filters').data('clicked', false);
        } else {
            counter = counter;
        };

        counter = counter + initShow;

        loadMore(counter);
    });

}

“加载更多”按钮仅适用于第一个元素。第二个元素什么也没发生

0 个答案:

没有答案
相关问题