js無后端實現(xiàn)點擊加載查看更多（提示SEO友好度）

更新時間：2024年10月19日 10:07:22 投稿：yin

為了提示SEO友好度,并且避免調用后端接口給服務器造成負擔,可以使用js無后端實現(xiàn)點擊加載查看更多,比如HTML中源碼存在60條記錄,預先顯示20條記錄,點擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來實現(xiàn)

為了提示SEO友好度，并且避免調用后端接口給服務器造成負擔，可以使用js無后端實現(xiàn)點擊加載查看更多。比如HTML中源碼存在60條記錄，預先顯示20條記錄，點擊“查看更多”一次追加10條，最后一次后按鈕文本改為“已查看全部”。

在JavaScript中，你可以使用以下步驟來實現(xiàn)點擊查看更多的功能：

確定觸發(fā)點擊事件的元素和需要顯示的文章列表。
為點擊事件綁定一個事件監(jiān)聽器。
在事件處理函數(shù)中，將原先隱藏的文章列表添加到頁面上。

簡單示例

以下是簡單實現(xiàn)這一功能的示例代碼：

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條文章，點擊按鈕后會顯示隱藏的文章列表，并且可以選擇是否移除按鈕或者更改按鈕文本。

拓展優(yōu)化

HTML隱藏列表問題

css實現(xiàn)列表超過10條隱藏

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

為什么html中不使用上述方式，而使用style="display:none;"來隱藏列表。因為js中for遍歷的時候使用style="display:none;"來標記隱藏的列表。

可以多次點擊“查看更多”

HTML中的列表數(shù)量要多一些，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';
        }
    }
});