Question

我有一个ajax调用，点击该部分我将从分配给该部分的类别中加载帖子（分配给他们的精选图像）。这一切都运作良好，除了一些事情。

1：当我的图像（来自帖子）被加载到第二个div时，我会有一个加载器。然后当div中的帖子的加载完成时，该div获得一个触发它的转换的类，以便它可见，加载器获得loaded类，并且没有ajax加载器存在。但是，当我点击隐藏第二个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;
}

删除课程。此外，我添加了额外的click事件，当您单击部分之间的导航时，将删除类，这是由fullPage.js添加的

：）

AJAX调用，仅在加载帖子时添加加载程序

1 个答案: