Question

您好我正在尝试制作一项功能，如果客户点击该节目更多，则会显示3张图片，如果再次点击该图片，则会再显示3张图片，因此会显示第四张图片。我在使用Javascript时遇到了麻烦，只是想知道是否有人可以帮我看错。

我的小提琴here

＆＃13;

$(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();
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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/

Answer 2

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

创建一个包含每个操作的函数的对象。

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

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

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

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

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

See the fiddle

代码中的许多问题，从逻辑问题到classname拼写错误。

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

谢谢（：

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

3 个答案:

See the fiddle