用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：懸停{顏色：藍; }

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

我已經重新編寫腳本...

的，這是進行正確的比較，並增加其代表有多少實際顯示的計數器。

請參閱代碼中的控制檯日誌和註釋。

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