单击显示更多时显示更多图像

您的代码需要一些小的修复。html和jquery中使用的id不一致。我已经更新了要通过切换css显示来修改的显示。

$(document).ready(function () {
   x=1;
   $('.handler li:lt('+x+')').css('display','block');
   $('.handler li').not(':lt('+x+')').css('display','none');
});
$('#loadMore').click(function () {
   image_x = $(".handler li").size();
   x= (x+1 <= image_x) ? x+1 : image_x;
   $('.handler li:lt('+x+')').css('display','block');
});
$('#loadLess').click(function () {
   image_x = $(".handler li").size();
   x=(x-1<=0) ? 3 : x-1;
   $('.handler li').not(':lt('+x+')').css('display','none');
});

请参阅：http://fiddle.jshell.net/n8f983cb/7/

看小提琴

代码中有许多问题，从逻辑问题到类名拼写错误。

所以，我稍微重写了一下你的代码。检查这是否满足您的需要。

谢谢（：

您的代码中存在一些错误，例如使用了错误的id以及其他错误。但是，我将展示我将如何处理这个问题，而不是详细说明那些对未来任何人都没有帮助的小拼写错误和语法错误。

创建一个对象，为每个操作保存一个函数。

• showMore应递增计数器，然后显示相应的项目
• showLess应递减计数器，然后隐藏相应的项目

创建一个函数，根据计数器隐藏或显示项目，并根据是否可以使用隐藏或显示每个操作。在前面定义的每个操作结束时调用此函数。

为控件的父级分配一个委托的事件侦听器，根据id查找正确的函数并执行它。我添加了一个回退，以防由于某种原因代码更改，无法再找到正确的函数。

我已经减少了HTML，并使用占位符图像来减少下面演示的大小，但它也适用于您的HTML。

$(document).ready(function() {
    var images = $(".handler > div").hide(), x = 1;
    var showMore = $('#showMore');
    var showLess = $('#showLess');
    var funcs = {
       'showMore': function() { ++x; show(); },
       'showLess': function() { --x; show(); }
    }
    $('.controls').on('click', 'a', function(e){
        return (funcs[e.target.id] || function(){})(), false;
    });
    function show() {
        images.hide().filter(function(i){ return i < (x * 3); }).show();
        showMore.show().filter(function(){ return !images.is(':hidden'); }).hide();
        showLess.show().filter(function(){ return x === 1; }).hide();
    }
    show();
});

.handler { width: 600px; } .handler > div { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="handler"><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div></div><br /><div class="col-md-6 controls"><a href="#" id="showMore">show more images</a> <a href="#" id="showLess">show less images</a></div>