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：悬停{color：blue; }

Answer 1

您需要在显示前两个

之前隐藏所有行

添加此行

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

前

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

Answer 2

一切都在这里：https://codepen.io/anon/pen/PmgoyJ?editors=1011

更改：

<div class="add-row">Add a Row</div>

size_li = $(".writing-clips .li").length;
...
...
$('.add-row').click(function () {
size_li = $(".writing-clips .li").length;
var lastStoryId=$('.writing-clips .li:last-child .col:last-child').attr('id').split('').reverse().join('');
var lastStoryNum=parseInt(lastStoryId.slice(0,lastStoryId.indexOf('-')).split('').reverse().join(''));
var newRow=$('<div class="row clip-container clips-'+(size_li+1)+' li">'
        +'<div class="col span-1-of-4 box" id="story-'+(lastStoryNum+1)+'" href="#">'
            +'<a href="#">content</a>'
        +'</div>'
        +'<div class="col span-1-of-4 box" id="story-'+(lastStoryNum+2)+'" href="#">'
            +'<a href="#">content</a>'
        +'</div>'
    +'</div>');
$('.writing-clips').append(newRow);

}）;

Answer 3

我重写了你的剧本......

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

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

＆＃13;

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

＆＃13;

.col{
  display:none;
}

＆＃13;

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

＆＃13;

'显示更多'＆amp;使用jQuery为文章网站“显示更少”

3 个答案: