如何僅運行一次函數，然後運行依賴於相同元素的另一個函數

我試圖爲一個站點一起破解無限滾動系統，但遇到問題。如何僅運行一次函數，然後運行依賴於相同元素的另一個函數

基本上有一個div，有很多<li>元素。

該函數切分div並隱藏每個<li>元素在第20個元素之後。一旦滾動到頁面底部，它將立即顯示所有切片並將其切換爲40，然後再次隱藏其餘部分。

$("#CategoryContent li").slice(20).hide();  

$(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() == $(document).height()) { 
      $("#CategoryContent li").show(); 
      $("#CategoryContent li").slice(40).hide(); 
     } 
    });

我非常希望這種情況無限發生，直到所有的內容被加載。

添加具有不同切片編號的相同代碼顯然不起作用。那麼我會怎麼做呢？

將第一個切片的值存儲在一個變量中，一旦該函數執行後，將該變量增加20？

我已經搜索了插件插件來照顧這個對我來說，但他們都依賴於目前不是一個選項的分頁。

來源

2012-05-02 James

你需要保持）的偏移值會在'.slice使用（'。 –

我終於實現了這個

var mincount = 20; 
var maxcount = 40; 


$(window).scroll(function() 
        { 
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) { 
          $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800); 

mincount = mincount+20; 
maxcount = maxcount+20 

} 
});

來源

2012-05-24 02:06:44 James

這很貴，但你可以得到可見元素的數量，然後添加20個元素。調用$("#CategoryContent li").show()之前，你可以這樣做：

var visibleItems = $("#CategoryContent li").filter(function(i, el) { 
    return $(el).css("display") !== "none"; 
});

這將返回所有項目在$（「＃CategoryContent李」）的集合，沒有自己的CSS display屬性設置爲none。

然後，你可以更新您的切片呼籲：

$("#CategoryContent li").slice(visibleItems.length + 20).hide();

話雖這麼說，更好的辦法是手動跟蹤的計數，只是把一個函數來包裹了整個事情。

(function () { 
    var visibleCount = 20; 

    $(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() == $(document).height()) { 
      visibleCount += 20; 
      $("#CategoryContent li").show(); 
      $("#CategoryContent li").slice(visibleCount).hide(); 
     } 
    }); 
}());

來源

2012-05-02 06:20:31 jamesinc

我會做的第一件事就是緩存您的選擇器。有道理，因爲它看起來像你一直在使用它。

var category_content_lis = $('#CategoryContent li');

接下來，我可能不會打擾.slice爲此。我很可能只是使用類似:lt()選擇器來以某種方式微調我的選擇器。

想法是隱藏所有內容然後以增量顯示它們。現在

category_content_lis 
    .hide() 
    .filter(':lt(20)') 
    .show() 
    ;

，如果你只是在展示20的增量它們，那麼你可以做這樣的事情引發出下一個20：

category_content_lis 
    .filter(':hidden:lt(20)') 
    .show() 
    ;

...它可以方便地在封裝一個函數，如果你願意。無論你的名單有多長，這都會奏效。

請注意，我們沒有隱藏所有，然後顯示選擇。類似的東西會導致閃爍，這只是令人討厭，並且may or may not cause epilepsy。（我開玩笑對最後一部分。）

來源

2012-05-02 07:16:47

如何僅運行一次函數，然後運行依賴於相同元素的另一個函數

回答

相關問題