Question

我正在使用带有jQuery同位素的无限滚动插件（infinite-scroll），并且想知道当用户向下滚动页面以查看更多项目时是否可以使用自定义查询参数修改路径。

是否有办法访问路径并修改其中一个查询参数。它第一次返回第一组项目时就已经确定路径了，之后它会打到下一页，1,2 3 ok但使用我第一次使用的相同查询参数只更新页码。

我想在点击第3页或第4页时修改其中一个参数：

var customPath = path + "?type=items&category=clothes&pageNumber=";

我接近这个错误的方式吗？

这是我的代码：

$container.infinitescroll({
    navSelector: '#page_nav', // selector for the paged navigation 
    nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
    itemSelector: '.element', // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more categories to load.',
        msgText: "<em>Loading the next set of categories...</em>",
        img: 'http://i.imgur.com/qkKy8.gif'
    },
    pathParse: function (path, nextPage) {
        var customPath = path + "?type=items&category=all&pageNumber=";
        path = [customPath, '#contaner'];
        return path;
    }
},
// call Isotope as a callback
function (newElements) {
    $container.isotope('appended', $(newElements));
});

Answer 1

好的，所以我不得不做一点点破解，但是我得到了它的工作以满足我的需求，感谢Rich指出我的相关问题。

我在jquery.infinitescroll.js原型中添加了一些额外的属性：

//line 67
 $.infinitescroll.prototype = {
       //My custom parameters
        pageType: "&type=items",
        categoryParam: "&category=shoes",
        /*  
            ----------------------------
            Private methods
            ----------------------------
            */

然后在名为

的函数内部

retrieve: function infscr_retrieve(pageNum) {}

有一个变量：

desturl = path.join(opts.state.currPage)

将其更改为

desturl = path.join(opts.state.currPage + $.infinitescroll.prototype.pageType + $.infinitescroll.prototype.categoryParam);

这将在desturl的末尾添加您的其他查询参数。

然后，从您拥有JavaScript的页面，您可以执行以下操作：

$('#filters a').click(function () {
    $.infinitescroll.prototype.pageType = "&type=products" ;                  
    $.infinitescroll.prototype.pageType = "&category=clothes";                           
     return false;
});

这将使用您的自定义查询更新下一页的查询参数。

希望这会对某人有所帮助。

无限滚动插件使用自定义查询修改路径

1 个答案: