软件开发培训班 >> 编程开发 >> JavaScript


js无后端实现点击加载查看更多（提示SEO友好度）

为了提示SEO友好度，并且避免调用后端接口给服务器造成负担，可以使用js无后端实现点击加载查看更多 。比如HTML中源码存在60条记录，预先显示20条记录，点击“查看更多”一次追加10条，最后一次后按钮文本改为“已查看全部” 。

在JavaScript中，你可以使用以下步骤来实现点击查看更多的功能：

简单示例

以下是简单实现这一功能的示例代码：

HTML部分

<button id="viewMoreButton">查看更多</button>
<div id="articleList">
    <!-- 这里是原先隐藏的文章列表，初始显示的前5条 -->
    <div>文章1</div>
    <div>文章2</div>
    <div>文章3</div>
    <div>文章4</div>
    <div>文章5</div>
    
    <!-- 隐藏的文章列表，点击按钮后显示 -->
    <div style="display:none;">文章6</div>
    <div style="display:none;">文章7</div>
    <div style="display:none;">文章8</div>
    <div style="display:none;">文章9</div>
    <div style="display:none;">文章10</div>
</div>

JavaScript部分

document.getElementById('viewMoreButton').addEventListener('click', function() {
    var articleList = document.getElementById('articleList');
    var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
    
    // 将隐藏的文章显示出来
    for (var i = 0; i < hiddenArticles.length; i++) {
        hiddenArticles[i].style.display = 'block';
    }
    
    // 可以选择之后移除按钮或者改变按钮文本
    this.remove(); // 移除按钮
    // 或者
    this.innerText = '已查看全部';
});

在这个例子中，初始时显示前5条文章，点击按钮后会显示隐藏的文章列表，并且可以选择是否移除按钮或者更改按钮文本 。

拓展优化

HTML隐藏列表问题

css实现列表超过10条隐藏

#articleList div:nth-child(n+11) {
  display: none;
}

为什么html中不使用上述方式，而使用style="display:none;"来隐藏列表 。因为js中for遍历的时候使用style="display:none;"来标记隐藏的列表 。

可以多次点击“查看更多”

HTML中的列表数量要多一些，js代码如下

document.getElementById('viewMoreButton').addEventListener('click', function() {
    var articleList = document.getElementById('articleList');
    var hiddenArticles = articleList.querySelectorAll('[style*="display:none"]');
    var hiddennum = hiddenArticles.length;
    var num = 10;
    if (hiddennum==0){
        alert('没有更多了');
    } else {
        if (hiddennum<=10) {
            num = hiddennum;
            this.innerText = '已查看全部';
        }
        for (var i = 0; i < num; i++) {
            hiddenArticles[i].style.display = 'block';
        }
    }
});

总结

到此这篇关于js无后端实现点击加载查看更多（提示SEO友好度）的文章就介绍到这了,更多相关js无后端实现查看更多内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！