0

我无法理解脚本是如何工作的，我可以做些什么来改进它，缩小等。我还想找到一种附加按钮的方法，这将停止该功能（有点禁用自动加载内容按钮）， 你有什么主意吗？这是代码：（对我来说最重要的部分是理解代码）

var page = 1;
var pageLast = 1;
var stop = false;
function lastPostFunc() 
{ 

    $('div#loading').html('loading data ...') ;
    page += 1;
    if (page+1 > pageLast) {
        stop=true;
    }
    var objURL = new Object();
    window.location.search.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
        objURL[ $1 ] = $3;
        }
        );
    q = '?strona='+page
    for (var k in objURL){
        if (k != 'strona' ) 
            q += ('&'+k+'='+objURL[ k ])
    }
    data = $('<div/>').load( "/shop/category/example/" + q +' #produkt_lista',function() {
        $('.produkt .opis',$(this)).each( function() { $(this).css('display', 'none'); } );
        $('a.jt').cluetip({ cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false, sticky: false, mouseOutClose: true, showTitle: false, closeText: 'zamknij', width: 300, positionBy: 'mouse', topOffset: 0});
    });
    if (data != "") {
        $('.paginator').hide();       
        $("#produkt_lista").append(data);            
    } 
    $('div#loading').empty();
}; 

$(document).ready(function() { 

pageLast = parseInt( $('.paginator .paginate-pages').first().text().replace('Stron: ',''));
$('#produkt_lista').after( $('<div id="wczytywanie" style="display: none; font-weight: bold; font-size: 20px; line-height: 40px; color: red; margin: 20px auto; width: 300px; border: 1px solid red;"></div>') );
$(window).scroll(function(){
        if  ($(window).scrollTop()+200 > $(document).height() - $(window).height()){
           if (!stop) lastPostFunc();
        }
});
} );
4

1 回答 1

1

该脚本基本上将该lastPostFunc()函数绑定到$(window).scroll()事件。它说如果用户向下滚动到屏幕底部 200 像素，JavaScript 应该触发该函数。

该函数所做的只是显示一个加载 div，可能是模态或覆盖，然后获取下一页数据：

  • /shop/category/example/?strona=1#produkt_lista
  • /shop/category/example/?strona=2#produkt_lista
  • /shop/category/example/?strona=3#produkt_lista

..等等。然后它遍历与 CSS 类匹配的所有节点.produkt .opis并使用$(this).css('display','none');. 它应该只是 using $(this).hide();，但它会以任何一种方式工作。

之后，它将一个cluetip插件绑定到该类的所有锚点，.jt并传入一些不同的插件参数。我想这样你就可以用鼠标悬停它们，光标附近会出现一些精美的工具提示。

最后它检查 data 是否不为空并隐藏 paginator 元素（不知道为什么）并将新获取的 HTML 包装的数据附加到内部的现有数据中#produkt_lista。

于 2012-05-05T09:58:31.343 回答