javascript - 如何在html或js中为博客添加 'Load More..'选项？

Question

我正在从 SQL 数据库加载博客，有些博客相当长。所以我想将每个博客限制在30个左右(可以多也可以少)字，然后添加一个Load More链接位于末尾，然后将加载博客的其余部分供用户查看。

通过 jQuery AJAX 调用检索博客。然后接收到的数据通过 for loop 运行。设置返回的 JSON 数组的长度。最后填充 .append(<The html to be appended>); 。这就是它的样子:

    $.ajax({
    type: "GET",
    url: "<url to api>",
    success: function (data) {
        for (let i = 0; i < data.length; i++) {
            blogsBlock.append(`
            <div class="blog">
                <div class="blog-header">`+ data[i].Name + `</div>
                <div class="blog-content">
                    <div class="blog-content-inner">
                        `+ data[i].Blog + `
                    </div>
                </div>
                <div class="blog-footer">
                    Uploaded: `+ data[i].Date+ `
                </div>
            </div>
            `);
        }
    }
});

同样，我想将博客限制在 30 个字左右，然后附加 Load More它旁边的按钮将在用户单击时加载博客的其余部分。

Answer 1

由于您想要显示博客列表并将其限制为 30 个字(您应该计算字符而不是字数，例如 150 个字符)，有两种常见的方法可以解决您的问题 -

解决方案1

您应该向数据库表添加一列，其中可以保存博客的简短描述或博客的标题，然后从服务器获取并显示它。当您将博客数据插入数据库时​​，此简短描述可以从用户处获取，也可以根据实际博客(例如博客内容的前 150 个字符)计算得出。

解决方案2

如果您的数据库中已经有很多博客，并且没有简短描述的列，则可以在从数据库获取数据时限制字符。例如-

SELECT SUBSTRING(`text`, 1, 150) as shortDesc FROM BlogTable;