Question

我试图让我的JS代码允许用户点击＆＃34;显示5更多＆＃34;按钮再显示5个＆＃34;内容部分＆＃34; divs，并在共有20个内容部分时禁用该按钮＆＃39;显示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个

JS

function showPreview () {

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

Answer 1

Codepen example here.

我会将所有内容部分div包装在你可以追加到的div中。另外添加一个show more按钮：

<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中，检查是否单击了“阅读更多”按钮。然后检查.content-section内是否有少于20 <div class="articles">个div。如果是这样，那么你可以附加你想要的东西（将append()语句中的内容更改为你想要追加的内容，只需确保你遵循这样的方案，其中每篇文章都包含在一个类为{的div中。 {1}}。

content-section

单击按钮可显示另外5个div，但最多只能显示20个div？

1 个答案: