使用jQuery对文章网站进行“显示更多”和“显示更少”

Question

当用户单击“显示更多”时，我试图显示多行文章，而我想用“显示较少”来删除该行。

我有4行文章，但我想从2行开始，并让用户一次添加一行。
我的jQuery可能有点混乱，因为我从不同的地方收集了点点滴滴。
我通过删除内容简化了代码。

知道为什么它不起作用吗？

<div class="writing-clips">
  <div class="row">
    <h2>Writing Clips</h2>
  </div>
  <div class="row clip-container li">
    <div class="col span-1-of-4 box" id="story-1" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-2">
      <a href="#">
        content
      </a>
    </div>           
  </div>
  <div class="row clip-container clips-2 li">
    <div class="col span-1-of-4 box" id="story-5" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-6" href="#">
      <a href="#">
        content     
      </a>
    </div>
  </div>
  <div class="row clip-container clips-3 li">
    <div class="col span-1-of-4 box" id="story-9" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-10" href="#">
      <a href="#">
        content   
      </a>
    </div>
  </div>
  <div class="row clip-container clips-4 li">
    <div class="col span-1-of-4 box" id="story-13" href="#">
      <a href="#">
        content
      </a>
    </div>
    <div class="col span-1-of-4 box" id="story-14" href="#">
      <a href="#">
        content 
      </a>
    </div>
  </div>
  </section>
<div class="showmore">showmore</div>
<div class="showless">showless</div>

jQuery的：

$(document).ready(function(){

  size_li = $(".writing-clips .li").size();
  x=2;
  $('.writing-clips .li:lt('+x+')').show();
  $('.showmore').click(function () {
    x= (x+1 <= size_li) ? x+1 : size_li;
    $('.writing-clips .li:lt('+x+')').show();
  });
  $('.showless').click(function () {
    x=(x-1<2) ? 2 : x-1;
    $('.writing-clips .li').not(':lt('+x+')').hide();
  });

});

CSS：

.writing-clips .li { display: none; }

.showmore {
    cursor: pointer;
    color: green;
}

.showmore:hover { color: blue; }

.showless {
    color: red;
    cursor: pointer;
}

.showless：hover {颜色：蓝色； }

Answer 1

在显示前两行之前，您需要隐藏所有行

添加此行

$('.writing-clips .li').hide();

之前

$('.writing-clips .li:lt('+x+')').show();

Answer 2

我已经改写了你的剧本...

这是为了执行正确的比较并增加一个计数器，该计数器代表实际显示的数量。

请参阅控制台日志和代码中的注释。

 $(document).ready(function(){ // Show first four. var shownOnload = 4; for(i=0;i<shownOnload;i++){ $(".col").eq(i).show(); } // Total link we have var size_li = $(".col").length; console.log( " Total: " +size_li ); // More handler $(".showmore").click(function () { console.log("More clicked!"); if(shownOnload<size_li && shownOnload>=0){ shownOnload++; console.log("Show #"+shownOnload); $(".col").eq(shownOnload-1).show(); } }); // Less handler $(".showless").click(function () { console.log("Less clicked!"); if(shownOnload<=size_li && shownOnload>0){ console.log("Hide #"+shownOnload); $(".col").eq(shownOnload-1).hide(); shownOnload--; } }); }); // ready 

 .col{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="writing-clips"> <div class="row"> <h2>Writing Clips</h2> </div> <div class="row clip-container li"> <div class="col span-1-of-4 box" id="story-1" href="#"> <a href="#"> content 1 </a> </div> <div class="col span-1-of-4 box" id="story-2"> <a href="#"> content 2 </a> </div> </div> <div class="row clip-container clips-2 li"> <div class="col span-1-of-4 box" id="story-5" href="#"> <a href="#"> content 3 </a> </div> <div class="col span-1-of-4 box" id="story-6" href="#"> <a href="#"> content 4 </a> </div> </div> <div class="row clip-container clips-3 li"> <div class="col span-1-of-4 box" id="story-9" href="#"> <a href="#"> content 5 </a> </div> <div class="col span-1-of-4 box" id="story-10" href="#"> <a href="#"> content 6 </a> </div> </div> <div class="row clip-container clips-4 li"> <div class="col span-1-of-4 box" id="story-13" href="#"> <a href="#"> content 7 </a> </div> <div class="col span-1-of-4 box" id="story-14" href="#"> <a href="#"> content 8 </a> </div> </div> </section> <div class="showmore">showmore</div> <div class="showless">showless</div>