使用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 : blue；}

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>

​