0

我正在尝试为我的网站的照片部分创建一个系统，该系统具有显示更多和隐藏更少的功能，但我似乎遇到了一些麻烦。我在这里创建了一个小提琴，所以你可以准确地看到我在说什么。

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

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

我的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();
          }
      });
4

3 回答 3

2

如果您最初隐藏所有图像和隐藏按钮，您的 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-01T18:58:19.700 回答
0

也许你可以按照这个example。基本上它是切片 2 个项目而不是 10 个。它使用 css 隐藏从 ul 内的第 3 个 li 开始的所有 li。

于 2013-11-01T19:03:24.907 回答
0

好的，这个http://jsfiddle.net/SrK88/21/怎么样

UPDATE 修改了代码以使用运算符处理不均匀的数量：http %: //jsfiddle.net/SrK88/23/

首先，您的图像都是可见的，因为您从一开始就从不隐藏它们。

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

其余的我很乐意解释，如果从示例中不清楚

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

于 2013-11-01T19:09:18.953 回答