顯示和隱藏項目顯示更多，並顯示更少的按鈕

我試圖爲我的網站的照片部分創建一個系統，有一個更多的隱藏功能，但我似乎有點麻煩。我創建了一個小提琴here，所以你可以看到我在說什麼。顯示和隱藏項目顯示更多，並顯示更少的按鈕

基本上，我想要加載顯示的十個圖像（這不會發生），然後能夠顯示十個，然後有另一個按鈕，將隱藏其中十個。

雖然我的增值似乎有些事情發生。在加載所有的圖像顯示，當我擊中少顯示，然後他們都消失。然後，我可以添加或刪除十，，但是當碰巧有不平衡數量的圖像時，它會中斷並隱藏或顯示更多，然後需要。那有意義嗎？

我的js看起來像這樣。任何幫助將是美好的！

size_li = $(".imgLinks li").size(); 
     x=10; 
     $('.imgLinks li:lt('+x+')').show(); 
     $('.show_button').click(function() { 
      x= (x+10 <= size_li) ? x+10 : size_li; 
      $('.imgLinks li:lt('+x+')').show(); 
      $('.hide_button').show(); 
      if(x == size_li){ 
       $('.show_button').hide(); 
      } 
     }); 
     $('.hide_button').click(function() { 
      x=(x-10<0) ? 10 : x-10; 
      $('.imgLinks li').not(':lt('+x+')').hide(); 
      $('.show_button').show(); 
      $('.hide_button').show(); 
      if(x == 10){ 
       $('.hide_button').hide(); 
      } 
     });

來源

2013-11-01 zazvorniki

你可能想重寫'x =（x-10 <0）？ 10：x-10'到'x = Math.max（x-10,0）'和'x =（x + 10 <= size_li）？ x + 10：size_li'到'x = Math。min（x + 10，size_li）' –

@ user1561072當我在小提琴中做到這一點，它打破了整個事情... – zazvorniki

對不起，應該是'x = Math.max（x - 10，10）'和'Math.min（x + 10，size_li）'。你確定'（x-10 <0）'，但是'10'的最小值？編輯：試過了，工作。 –

如果您最初隱藏所有圖像和隱藏按鈕，您的js代碼將顯示前十，並且一切看起來都很好。添加以下在你的CSS代碼，

.imgLinks li, .hide_button{ 
    display:none; 
}

http://jsfiddle.net/SrK88/8/

或在您的js的頂部添加以下兩行，

$(".imgLinks li").hide(); 
$(".hide_button").hide();

http://jsfiddle.net/SrK88/9

編輯

偶數/不均勻的問題修改代碼隱藏的話，

$('.hide_button').click(function() { 
     x = (x - 10 < 0) ? 10 : (x%10!=0?x-(x%10):x - 10); 
     $('.imgLinks li').not(':lt(' + x + ')').hide(); 
     $('.show_button').show(); 
     $('.hide_button').show(); 
     if (x == 10) { 
      $('.hide_button').hide(); 
     } 
    });

http://jsfiddle.net/SrK88/24/

來源

2013-11-01 18:58:19 melc

這確實修復了它的一部分，並且謝謝，但是如果li不是甚至還有問題。如果不是20個圖像，則有18個圖像。如果在那個小提琴上，你會一直走到底部，你可以看到它的功能。 – zazvorniki

@zazvorniki錯過了那部分，我想現在沒關係。 – melc