javascript - 如何在JQuery显示/隐藏方法中停止重复div？

Question

我的问题是，当我调用我的ajax时，每次单击下一页时加载图像都会重复，我需要停止此重复加载图像并在单击下一页时出现一次。

我所做的是制作<div class="image_ajax_loader" style="display:none;" >然后使用 jquery show/hide 方法显示 div

我的html中有翻页div

<div class="image_ajax_loader" style="display:none;" >
    <p class="loadingimage">
        <img src="{$img_ps_dir}loader.gif" alt="" />
        <br />{l s='Loading...' mod='blocklayered'}
    </p>
</div>

所以我显示加载图像:

$('.image_ajax_loader').show();

我通过以下方式隐藏它:

$('.image_ajax_loader').hide();

这是我的 JQuery 代码:

function reloadContent(params_plus)
{
    stopAjaxQuery();

    if (!ajaxLoaderOn)
    {
        $('.image_ajax_loader').show();
        $('.product_list').hide();
        ajaxLoaderOn = 1;
    }

    data = $('#layered_form').serialize();
    $('.layered_slider').each( function () {
        var sliderStart = $(this).slider('values', 0);
        var sliderStop = $(this).slider('values', 1);
        if (typeof(sliderStart) == 'number' && typeof(sliderStop) == 'number')
            data += '&'+$(this).attr('id')+'='+sliderStart+'_'+sliderStop;
    });

    $(['price', 'weight']).each(function(it, sliderType)
    {
        if ($('#layered_'+sliderType+'_range_min').length)
            data += '&layered_'+sliderType+'_slider='+$('#layered_'+sliderType+'_range_min').val()+'_'+$('#layered_'+sliderType+'_range_max').val();
    });

    $('#layered_form .select option').each( function () {
        if($(this).attr('id') && $(this).parent().val() == $(this).val())
            data += '&'+$(this).attr('id') + '=' + $(this).val();
    });

    if ($('.selectProductSort').length && $('.selectProductSort').val())
    {
        if ($('.selectProductSort').val().search(/orderby=/) > 0)
        {
            // Old ordering working
            var splitData = [
                $('.selectProductSort').val().match(/orderby=(\w*)/)[1],
                $('.selectProductSort').val().match(/orderway=(\w*)/)[1]
            ];
        }
        else
        {
            // New working for default theme 1.4 and theme 1.5
            var splitData = $('.selectProductSort').val().split(':');
        }
        data += '&orderby='+splitData[0]+'&orderway='+splitData[1];
    }
    if ($('select[name=n]:first').length)
    {
        if (params_plus)
            data += '&n=' + $('select[name=n]:first').val();
        else
            data += '&n=' + $('div.pagination form.showall').find('input[name=n]').val();
    }

    var slideUp = true;
    if (params_plus == undefined || !(typeof params_plus == 'string'))
    {
        params_plus = '';
        slideUp = false;
    }

    // Get nb items per page
    var n = '';
    if (params_plus)
    {
        $('div.pagination select[name=n]').children().each(function(it, option) {
            if (option.selected)
                n = '&n=' + option.value;
        });
    }
    ajaxQuery = $.ajax(
    {
        type: 'GET',
        url: baseDir + 'modules/blocklayered/blocklayered-ajax.php',
        data: data+params_plus+n,
        dataType: 'json',
        cache: false, // @todo see a way to use cache and to add a timestamps parameter to refresh cache each 10 minutes for example
        success: function(result)
        {
            $('.image_ajax_loader').hide();

            if (result.meta_description != '')
                $('meta[name="description"]').attr('content', result.meta_description);

            if (result.meta_keywords != '')
                $('meta[name="keywords"]').attr('content', result.meta_keywords);

            if (result.meta_title != '')
                $('title').html(result.meta_title);

            if (result.heading != '')
                $('h1.page-heading .cat-name').html(result.heading);

            $('#layered_block_left').replaceWith(utf8_decode(result.filtersBlock));
            $('.category-product-count, .heading-counter').html(result.categoryCount);

            if (result.nbRenderedProducts == result.nbAskedProducts)
                $('div.clearfix.selector1').hide();

            if (result.productList){
                $('.product_list').replaceWith(utf8_decode(result.productList));
            }
            else
                $('.product_list').html('');

            $('.product_list').css('opacity', '1');
            if ($.browser.msie) // Fix bug with IE8 and aliasing
                $('.product_list').css('filter', '');

            if (result.pagination.search(/[^\s]/) >= 0)
            {
                var pagination = $('<div/>').html(result.pagination)
                var pagination_bottom = $('<div/>').html(result.pagination_bottom);

                if ($('<div/>').html(pagination).find('#pagination').length)
                {
                    $('#pagination').show();
                    $('#pagination').replaceWith(pagination.find('#pagination'));
                }
                else
                    $('#pagination').hide();

                if ($('<div/>').html(pagination_bottom).find('#pagination_bottom').length)
                {
                    $('#pagination_bottom').show();
                    $('#pagination_bottom').replaceWith(pagination_bottom.find('#pagination_bottom'));
                }
                else
                    $('#pagination_bottom').hide();
            }
            else
            {
                $('#pagination').hide();
                $('#pagination_bottom').hide();
            }

            paginationButton(result.nbRenderedProducts, result.nbAskedProducts);
            ajaxLoaderOn = 0;

            // On submiting nb items form, relaod with the good nb of items
            $('div.pagination form').on('submit', function(e)
            {
                e.preventDefault();
                val = $('div.pagination select[name=n]').val();

                $('div.pagination select[name=n]').children().each(function(it, option) {
                    if (option.value == val)
                        $(option).attr('selected', true);
                    else
                        $(option).removeAttr('selected');
                });

                // Reload products and pagination
                reloadContent();
            });
            if (typeof(ajaxCart) != "undefined")
                ajaxCart.overrideButtonsInThePage();

            if (typeof(reloadProductComparison) == 'function')
                reloadProductComparison();

            filters = result.filters;
            initFilters();
            initSliders();

            current_friendly_url = result.current_friendly_url;

            // Currente page url
            if (typeof(current_friendly_url) === 'undefined')
                current_friendly_url = '#';

            // Get all sliders value
            $(['price', 'weight']).each(function(it, sliderType)
            {
                if ($('#layered_'+sliderType+'_slider').length)
                {
                    // Check if slider is enable & if slider is used
                    if (typeof($('#layered_'+sliderType+'_slider').slider('values', 0)) != 'object')
                    {
                        if ($('#layered_'+sliderType+'_slider').slider('values', 0) != $('#layered_'+sliderType+'_slider').slider('option' , 'min')
                        || $('#layered_'+sliderType+'_slider').slider('values', 1) != $('#layered_'+sliderType+'_slider').slider('option' , 'max'))
                            current_friendly_url += '/'+blocklayeredSliderName[sliderType]+'-'+$('#layered_'+sliderType+'_slider').slider('values', 0)+'-'+$('#layered_'+sliderType+'_slider').slider('values', 1)
                    }
                }
                else if ($('#layered_'+sliderType+'_range_min').length)
                    current_friendly_url += '/'+blocklayeredSliderName[sliderType]+'-'+$('#layered_'+sliderType+'_range_min').val()+'-'+$('#layered_'+sliderType+'_range_max').val();
            });

            window.location.href = current_friendly_url;

            if (current_friendly_url != '#/show-all')
                $('div.clearfix.selector1').show();

            lockLocationChecking = true;

            if (slideUp)
                $.scrollTo('.product_list', 400);
            updateProductUrl();

            $('.hide-action').each(function() {
                hideFilterValueAction(this);
            });

            if (display instanceof Function) {
                var view = $.totalStorage('display');

                if (view && view != 'grid')
                    display(view);
            }
        }
    });
    ajaxQueries.push(ajaxQuery);
}

Answer 1

根据您的代码，您使用了 image_ajax_loader 2 次。就在一处评论吧。根据我的理解，您在单击“下一步”按钮时使用调用“reloadContent(params_plus)”函数，并且调用 ajax_loader 两次。