使用javascript進行動態HTML分頁

Question

我有以下分頁控制

index.html中的代碼（初始狀態）：

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id= "active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

在javascript中，我附加了事件監聽器：

document.getElementById("page_paging").addEventListener("click", LoadPages);

然后在功能中，我根據用戶單擊的內容生成頁面列表

function generateUL(minPage, maxPage, newActivePage){
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";

    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    {
        if( pageIdx == newActivePage) { 
            innerHtml += "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        }
        else{
            innerHtml += "<li><a href=\"#previous_section\">" + pageIdx + "</li>";
        }
    }
    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;
}

盡管返回的html看起來與初始狀態“原始狀態”完全相同-控件會松散圓圈之間的空格

結果html：

<ul id="page_paging">
    <li><a href="#previous_section">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#previous_section">2</a></li>
    <li><a href="#previous_section">3</a></li>
    <li><a href="#previous_section">4</a></li>
    <li><a href="#previous_section">5</a></li>
    <li><a href="#previous_section">&gt;</a></li>
</ul>

以及控件的外觀

是否有人知道發生這種情況的原因以及如何解決？

Answer 1

結果HTML具有不同的ID（“ episode_paging”），因此CSS可能有所不同。 當涉及到代碼本身而不是“ #previous_section”時，我將使用“數據頁”或類似的方法，下面是普通的JS樣板：

<ul id="episode_paging">
    <li><a data-prev="1" href="#">&lt;</a></li>
    <li id="active_page" class="active"><span>1</span></li>
    <li><a href="#" data-page="2">2</a></li>
    <li><a href="#" data-page="3">3</a></li>
    <li><a href="#" data-page="4">4</a></li>
    <li><a href="#" data-page="5">5</a></li>
    <li><a data-next="1" href="#">&gt;</a></li>
</ul>
<script>
    var inputElem = document.getElementById("episode_paging").getElementsByTagName("a");
    for (var i = 0; i < inputElem.length; i++) {

        inputElem[i].addEventListener('click', function () {
            if (this.getAttribute("data-page"))
                alert(this.getAttribute("data-page"));
        }, false);
    }
</script>

Answer 2

像這樣使用CSS

.page_paging li {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

為了您的功能，我會這樣

function generateUL(minPage, maxPage, newActivePage){
    var innerHtml = "<li><a href=\"#previous_section\">&lt;</a></li>";
    for (var pageIdx = minPage; pageIdx <= maxPage; pageIdx++) 
    {

        if( pageIdx == newActivePage) { 
            var liElement = "<li id= \"active_page\" class=\"active\"><span>" + pageIdx + "</span></li>";
        }
        else{
            var liElement = "<li><a href=\"#previous_section\" >" + pageIdx + "</li>";
        }
        innerHtml += liElement;
    }

    innerHtml += "<li><a href=\"#previous_section\">&gt;</a></li>" ;  

    return innerHtml;
}

Answer 3

CSS示例：

#episode_paging li {
    padding: 0 2px !important;
}

#episode_paging li a {
    padding: 0 2px !important;
}