Question

我正在尝试为我的网站的照片部分创建一个系统，该系统有更多的显示并隐藏更少的功能，但我似乎遇到了一些麻烦。我创造了一个小提琴here，所以你可以看到我正在谈论的内容。

基本上，我想在加载时显示10个图像（这不会发生），然后能够再显示10个，然后有另一个按钮可以隐藏其中的10个。

虽然我的增量似乎发生了一些事情。在加载时，所有图像都显示出来，当我点击显示较少时，它们都会消失。然后我可以添加或删除10，但是当碰巧有不均匀的图像数量时它会断开并隐藏或显示更多，然后需要。这有意义吗？

我的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/

Answer 2

也许你可以关注这个example。基本上它是切换2个项目而不是10个。它使用css来隐藏从ul里面的第3个li开始的所有li。

Answer 3

好的http://jsfiddle.net/SrK88/21/

怎么样？

<强>更新使用%运算符处理代码以处理不均匀的金额：http://jsfiddle.net/SrK88/23/

首先，你的图像都是可见的，因为你从不隐藏它们。

在您的尺寸位中我将其更改为var size_li = $(".imgLinks li").hide().size();

其余的我很乐意解释它是否不清楚示例

内部跟踪您在显示/隐藏的位置似乎过于复杂，所以我只是查看可见的<li>并检查您是否可以显示或隐藏更多

显示和隐藏显示更多项目并显示更少按钮的项目

3 个答案: