點擊一個按鈕可顯示5個div，但只能顯示最多20 div的總數？

我試圖讓我的JS代碼允許用戶點擊「顯示5更多」按鈕來顯示5個「內容部分」divs，並且當總共20個內容部分div被禁用時顯示。我不確定爲什麼我的代碼不工作？我沒有最多20個div的代碼，我不確定該放置在哪裏。點擊一個按鈕可顯示5個div，但只能顯示最多20 div的總數？

HTML

<div class="content-section news-preview clearfix"> 
<div class="title">Title of News Article</div> 
<div class="clearfix"> 
    <div class="image-container"> 
     <img src="images/news_sample208x135.jpg" width="208" height="135"> 
    </div> 
    <div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p> 
    </div> 
</div> <a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>

顯示5個

function showPreview() { 

    if($('#show-more').on('click', function() { 
     $('.content-section').append(); 
    }); 
}

來源

2015-06-15 sk_225

每次追加後檢查divs.length> = 20 –

但我原來的JS代碼追加div不起作用，我不明白爲什麼 –

這是因爲你沒有追加任何東西，因爲你不是傳遞任何東西作爲參數，查看這個鏈接，看看如何使用append（）http://www.w3schools.com/jquery/html_append.asp –

Codepen example here.

我會將所有內容部分div包含在可添加到的div中。還添加了顯示更多按鈕，例如：

<div class="articles"> 
    <div class="content-section news-preview clearfix"> 
    <div class="title">Title of News Article</div> 
    <div class="clearfix"> 
     <div class="image-container"> 
      <img src="images/news_sample208x135.jpg" width="208" height="135"> 
     </div> 
     <div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p> 
     </div> 
    </div> 
    <a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a> 
</div> 

<a id="show-more" href="javascript:;">Show More</a>

在JavaScript，你檢查「更多」按鈕被點擊。然後你檢查<div class="articles">內是否有小於20的.content-section div。如果是這樣，那麼你可以追加你想要的內容（將append()聲明內的內容更改爲任何你想追加的內容，只要確保你遵循了每個文章被包裝在content-section的分類中的方案。

$('#show-more').click(function(){ 
    if($('.articles > .content-section').length<20){ 
     $('.articles').append('<div class="content-section">a</div>'); 
    } 
});

來源

2015-06-16 00:16:50

點擊一個按鈕可顯示5個div，但只能顯示最多20 div的總數？

回答

相關問題