1

I have got a problem with executing a function. What I am trying to achieve is when I click on the #loadmore the page variable should be increased by 1 number. And more items loaded from the server(at the moment when clicking it just loads the same).

$(document).on('click', '#blogs', function blogs() {
    $('#content, #category').empty();
    $('#category').prepend('<div class="categories_listing"><span data-type="blogs" data-category="5">Blog Category</span></div>');
    var count = "15";
    var page = "1"; 
        $.getJSON('https://domain.com/get_posts/?count=' + count + '&page=' + page, function (data, status) {
        if (data !== undefined && data.posts !== undefined) {
            $.each(data.posts, function (i, item) {
            var date = item.date;
            var dateSplit = date.split(" ");
            var dateSplit2 = dateSplit[0].split("-");
            var newDate = dateSplit2.reverse().join('-'); // 26-06-2013
            var str = item.title;
            $('#content').append('<div class="blogs_article" data-item="' + item.id + '"><div>' + str.substring(0, 1) + '</div>' + item.title + '<div>' + newDate + ' &mdash; ' + item.author.first_name +'</div></div>');
            if (data !== undefined) {
                $('#stats').text('Page ' + data.query.page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
            }
            if (data.query.page < data.pages) {
                $("#loadmore").show();
            } else {
                $("#loadmore").hide();

            }
            page++;
            });
        }
    });
    $('#category').append('<div id="loadmore"><div id="stats"></div><div id="loadmore">load more</div></div>');
    $('#loadmore').click(blogs);
});

Please help me I have spend the whole night and couldn't make it working. Thanks in advance.

4

1 回答 1

2

变量 page 必须在 click 回调范围之外声明，否则变量将在 click 函数的本地范围内，并在每次点击事件时重新初始化。

var page = 1;
$(document).on('click', '#blogs', function blogs() {
    $('#content, #category').empty();
    $('#category').prepend('<div class="categories_listing"><span data-type="blogs" data-category="5">Blog Category</span></div>');
    var count = "15";
    $.getJSON('https://domain.com/get_posts/?count=' + count + '&page=' + page, function (data, status) {
        if (data !== undefined && data.posts !== undefined) {
            $.each(data.posts, function (i, item) {
                var date = item.date;
                var dateSplit = date.split(" ");
                var dateSplit2 = dateSplit[0].split("-");
                var newDate = dateSplit2.reverse().join('-'); // 26-06-2013
                var str = item.title;
                $('#content').append('<div class="blogs_article" data-item="' + item.id + '"><div>' + str.substring(0, 1) + '</div>' + item.title + '<div>' + newDate + ' &mdash; ' + item.author.first_name + '</div></div>');
                if (data !== undefined) {
                    $('#stats').text('Page ' + data.query.page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
                }
                if (data.query.page < data.pages) {
                    $("#loadmore").show();
                } else {
                    $("#loadmore").hide();

                }
            });
            page++;
        }
    });
    $('#category').append('<div id="loadmore"><div id="stats"></div><div id="loadmore">load more</div></div>');
    $('#loadmore').click(blogs);
});
于 2013-10-06T10:24:05.203 回答