快捷導(dǎo)航

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

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

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

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

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

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

簡單示例

以下是簡單實(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>
    
    <!-- 隱藏的文章列表，點(diǎn)擊按鈕后顯示 -->
    <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 = '已查看全部';
});

在這個(gè)例子中，初始時(shí)顯示前5條文章，點(diǎn)擊按鈕后會(huì)顯示隱藏的文章列表，并且可以選擇是否移除按鈕或者更改按鈕文本。

拓展優(yōu)化

HTML隱藏列表問題

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

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

為什么html中不使用上述方式，而使用style="display:none;"來隱藏列表。因?yàn)閖s中for遍歷的時(shí)候使用style="display:none;"來標(biāo)記隱藏的列表。

可以多次點(diǎn)擊“查看更多”

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';
        }
    }
});

總結(jié)

到此這篇關(guān)于js無后端實(shí)現(xiàn)點(diǎn)擊加載查看更多（提示SEO友好度）的文章就介紹到這了,更多相關(guān)js無后端實(shí)現(xiàn)查看更多內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: