javascript - 使用“显示更多”和“显示更少”按钮显示和隐藏项目

Question

我正在尝试为我网站的照片部分创建一个系统，该系统具有显示更多和隐藏更少的功能，但我似乎遇到了一些麻烦。我创建了一个 fiddle 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();
          }
      });

Answer 1

如果您最初隐藏所有图像和隐藏按钮，您的 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/