javascript - 显示更多 点击显示更多图片

Question

您好，我正在尝试实现一项功能，如果客户点击该节目更多次，将显示 3 张图片，如果再点击一次，将显示另外 3 张图片，以此类推。我在使用 Javascript 时遇到问题，只是想知道是否有人可以帮助我查看错误。

我的 fiddle here

$(document).ready(function () {
    image_x = $(".handler .col-md-4").size();
    x=1;
    $('.handler .col-md-4:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= image_x) ? x+1 : image_x;
        $('.handler .col-md-4:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.handler .col-md-4').not(':lt('+x+')').hide();
    });
});

.col-md-4 {
    width: 100%;
    text-align: center;
}
.col-md-6 {
    width: 100%;
    text-align: center;
}
#loadmore {

 border: 1px solid;
 padding: 20px;
}
#loadless {
 
 border: 1px solid;
 padding: 20px;
}

<div class="handler">
<div class="col-md-4">
   <div class="livery-article">
      <a href="/blogs/good-company/72810435-hello-america">
         <img class="livery-article-image"
              src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
      </a>
   </div>  
</div>
<br />
<div class="col-md-4">
   <div class="livery-article">
      <a href="/blogs/good-company/72810435-hello-america">
         <img class="livery-article-image"
              src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
      </a>
   </div>  
</div>
<br />
<div class="col-md-4">
   <div class="livery-article">
      <a href="/blogs/good-company/72810435-hello-america">
         <img class="livery-article-image"
              src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
      </a>
   </div>  
</div>
<br />
<div class="col-md-4">
   <div class="livery-article">
      <a href="/blogs/good-company/72810435-hello-america">
         <img class="livery-article-image"
              src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
      </a>
   </div>  
</div>
<br />
</div>
    
    <br />
    <br />
    <div class="col-md-6">
        <a href="#" id="loadmore">show more image</a>
        <a href="#" id="loadless">show more image</a>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

Answer 1

您的代码需要一些小的修正。 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/