jquery - AJAX 调用，仅在加载帖子时添加加载器

Question

我有一个 ajax 调用，点击该部分我将从分配给该部分的类别中加载帖子(分配给它们的特色图片)。这一切都很好，除了一些事情。

1:我有一个加载器，当我的图像(来自帖子)被加载到第二个 div 时，它会出现。然后，当 div 中的帖子加载完成时，该 div 获得一个触发它的转换的类，以便它可见，加载器获得一个 loaded 类，并且不存在 ajax 加载器。但是，当我单击以隐藏第二个 div(画廊)时，加载程序再次出现，然后发生转换。如何做到在第二次点击时我不会有加载器，而只有立即隐藏该 div 的转换？

我在 wordpress 上做这个。我的 ajax 看起来像这样。

var $content = $("#gallery");
var $content_inner = $("#inner_gallery");
var $fullPage = $('#fullpage');
var $galleryCat = $('#fullpage').find('.section');
var $close = $('.close');
var $loader = $("#loader");  
var catID;
var order;
var orderby;

$('#fullpage').find('.section').eq(0).addClass('first');

$galleryCat.each(function(){
    $(this).on('click', function(){
        catID = $(this).data('cat');
        order = $(this).data('order');
        orderby = $(this).data('orderby');
        load_posts(catID, order, orderby);
        if(!$(this).hasClass('first')){
            $fullPage.toggleClass('galleryShow');
        }
        if (!$content.hasClass('galleryShow')) {
            $content_inner.scrollTop(0);
        }
    });
});

function load_posts(currentCat, order, orderby){
    var str = '&cat=' + currentCat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts';
    $content_inner.html();
    $.ajax({
        type: "POST",
        dataType   : "html",
        url: get_gallery_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if ($data.length) {
                $content_inner.imagesLoaded(function(){
                    $content_inner.html(data);
                    $content.toggleClass('galleryShow');
                });
            }
        },
        beforeSend : function(){
            $loader.removeClass('loaded').addClass('loading');
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        },
        complete : function(){
            $loader.removeClass('loading').addClass('loaded');
        }
    });
    return false;
}

HTML 看起来像这样:

<div id="fullpage">
<div class="section" data-cat="category1" data-catName="Category1" data-order="ASC" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
<div class="section" data-cat="category2" data-catName="Category2" data-order="ASC" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
<div class="section" data-cat="category3" data-catName="Category3" data-order="ASC" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
</div>
<div id="gallery">
    <div id="inner_gallery"></div>
</div>
<div id="loader"></div>

因此，当您单击一个部分时，您会从中获取所有信息，然后将其传递到一个函数中，该函数将查询所有帖子，然后这些帖子将出现在 #inner_gallery 中。

所有这些都有效，但需要一些调整。隐藏图库时使加载程序不加载，并重置内部图库的滚动位置。

编辑:我已经解决了滚动问题:

if (!$content.hasClass('galleryShow')) {
    $content_inner.scrollTop(0);
}

加载程序问题仍然存在。

Answer 1

好的，我想我明白了

var $content = $("#gallery");
var $content_inner = $("#inner_gallery");
var $fullPage = $('#fullpage');
var $galleryCat = $('#fullpage').find('.section');
var $close = $('.close');
var $loader = $("#loader");  
var catID;
var order;
var orderby;

$('#fullpage').find('.section').eq(0).addClass('first');

$(window).on('load', function(){
    $('#fp-nav').append('<div class="closed_nav"></div>');
});

$galleryCat.each(function(){
    $(this).on('click', function(){
        catID = $(this).data('cat');
        order = $(this).data('order');
        orderby = $(this).data('orderby');
        if(!$(this).hasClass('first')){
            $fullPage.toggleClass('galleryShow');
        }
        if (!$content.hasClass('galleryShow')) {
            load_posts(catID, order, orderby);
            $content_inner.scrollTop(0);
        }

        if ($content.hasClass('galleryShow')) {
            $content.removeClass('galleryShow')
        }

    });
});

$(document).on('click', '#fp-nav', function(){
    $content.removeClass('galleryShow');
    $fullPage.removeClass('galleryShow');
});

function load_posts(currentCat, order, orderby){
    var str = '&cat=' + currentCat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts';
    $content_inner.html();
    $.ajax({
        type: "POST",
        dataType   : "html",
        url: get_gallery_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if ($data.length) {
                $content_inner.imagesLoaded(function(){
                    $content_inner.html(data);
                    $content.toggleClass('galleryShow');
                });
            }
        },
        beforeSend : function(){
            $loader.removeClass('loaded').addClass('loading');
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        },
        complete : function(){
            $loader.removeClass('loading').addClass('loaded');
        }
    });
    return false;
}

只需删除类。我还添加了额外的点击事件，当您点击部分之间的导航时将删除类，这是由 fullPage.js 添加的

:)