如何为 html 或 js 中的博客添加“加载更多..”选项？答案

【问题标题】：How to add a 'Load More..' option for blogs in html or js?如何为 html 或 js 中的博客添加“加载更多..”选项？
【发布时间】：2019-01-22 12:49:22
【问题描述】：

我正在从 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 按钮，单击该按钮将为用户加载博客的其余部分。

【问题讨论】：

不确定我是否正确理解了您的问题。如果是长博客文本的情况，那么您可以通过在博客 div 上添加最小高度来显示有限的内容。
你有长短描述吗？ - 或者只是一个描述？
您正在加载“博客”（博客列表），然后您想将它们限制在 30 个字以内。这是您问的吗？
@santanubera，是的
@yfain，这真的比帮助别人更重要吗？

标签： javascript jquery html

【解决方案1】：

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

解决方案 1

您应该在数据库表中添加一列，该列可以包含博客的简短描述或博客的标题，然后从服务器获取并显示它。当您将博客数据插入数据库时，此简短描述可以从用户那里获取，也可以从实际博客（例如，博客内容的前 150 个字符）中计算得出。

解决方案 2

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

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

【讨论】：

那么如果有人点击Load More 按钮，我只需运行一个快速的ajax 并替换博客文本？
是的，你可以做到。我的回答只是限制了来自数据库的数据。当你从 MySQL 中获取数据时，你应该限制数据，而不是仅仅为了显示两三行而获取博客的全部内容。而“加载更多”按钮与此无关。加载更多操作完全独立于上述方案。
非常感谢您的帮助！真的很感激！

【解决方案2】：

如果您想要一个基于 javascript 的解决方案，您也可以只使用字符串的子字符串函数来限制显示的部分，并将其余部分放入一个跨度中。然后，当您单击“...更多”时，您只需从元素中删除该类。

html:

<div class="blog" id="result"></div>

css:

.hide {
  display: none;
}

.more:hover {
  color: #f00;
  cursor: 'pointer'!important;
}

.more.hide {
  display: none;
}

js:

let blog = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'

document.getElementById("result").innerHTML = blog.substr(0, 50) + '<span class="more">... more</span><span class="restOfBlog hide">' + blog.substr(50) + '</span>';

let blogElements = document.getElementsByClassName("more");
for (let i = 0; i < blogElements.length; i++){
    blogElements[i].addEventListener('click', function(){
    console.log(this);
    let parentElement = this.closest(".blog");
    console.log(parentElement);
    parentElement.querySelector(".restOfBlog").classList.remove("hide");
    parentElement.querySelector(".more").classList.add("hide");
  })
}

Fiddle

【讨论】：