Question

我正在为我的wordpress项目创建一个ajax post load。

当我向下滚动到页面时，页码每次增加1。这是我最初想要的。

实际问题：

当我选择一个类别下拉列表时，我想将页面变量重置为1。下面的代码为被调用的实例设置页码为1，然后当我向下滚动到页面时，它增加了前一个数字而不是1。

对于Ex：当我打开这个链接并在萤火虫中检查时......

- I see pageNumber variable set to 1.
- Now scroll down to page and it will be changed 2. Now when I go back to up and select any category to filter posts, and 
- Inspect page number in firebug it is now showing 1, which is right. 
- But Now if you scroll down to page you will pagenumber is changed to    3 not 2.

这是问题......

// ajaxLoop.js
jQuery(function($){
var $grid = $('.post-area').masonry({
      itemSelector: '.post-area .box',
    });
var page = 1; // initialization
var loading = true;
var $window = $(window);
var $content = $("body.blog #main");
var load_posts = function( page = 1, cat = '', year = '', orderby = '' ){
        // If any filter is applied and page is 1
        if((cat != '' || year != '' || orderby != '') &&  page == 1){
            $content.html('');
            page = 1; // I think this will reset the page variable to 1, but it is not working
        }
        $.ajax({
            type       : "GET",
            data       : {numPosts : 1, pageNumber: page, cat: cat, year: year, orderby: orderby},
            dataType   : "html",
            url        : "wp-content/themes/theme-name/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    $content.append('<div id="temp_load" style="text-align:center">\
                        <img src="/wp-content/themes/theme-name/images/ajax-loader.gif" />\
                        </div>');
                }
            },
            success    : function(data){

                $data = $(data);
                if($data.length){
                    $data.hide();
                    $content.append($data);
                    $grid.append( $data ).masonry( 'appended', $data );
                    $grid.masonry( 'reloadItems' );
                    $grid.masonry( 'layout' ); 
                    $data.fadeIn(500, function(){
                        $("#temp_load").remove();
                        loading = false;
                    });
                } else {
                    $("#temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
    });
}
$window.scroll(function() {
    var content_offset = $content.offset();
    console.log(content_offset.top);
    if(!loading && ($window.scrollTop() +
        $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
            loading = true;
            var cat = $('select[name="cat"]').val();
            var year = $('select[name="year"]').val();
            var orderby = $('select[name="orderby"]').val();
            page++;
            load_posts( page, cat, year, orderby);
    }
});
$('select[name="cat"]').on('change', function() {
    var cat = $(this).val();
    var year = $('select[name="year"]').val();
    var orderby = $('select[name="orderby"]').val();
    load_posts(1, cat, year, orderby);
});

$('select[name="year"]').on('change', function() {
    var year = $(this).val();
    var cat = $('select[name="cat"]').val();
    var orderby = $('select[name="orderby"]').val();
    load_posts(1, cat, year, orderby);
});

$('select[name="orderby"]').on('change', function() {
    var orderby = $(this).val();
    var cat = $('select[name="cat"]').val();
    var year = $('select[name="year"]').val();
    load_posts(1, cat, year, orderby);
});

load_posts();
});

我认为必须有一个简单的解决方案，但不要弄清楚。有人能引导我朝正确的方向发展吗？我对jquery不是那么忍者......

Answer 1

我认为这应该适合你，

从page

中删除load_posts参数

如果在调用change函数之前发生load_posts事件，请将此page值设置为1

将jquery变量重置为initial

1 个答案: