使用 javascript 的动态 HTML 分页
Posted
技术标签:
【中文标题】使用 javascript 的动态 HTML 分页【英文标题】:dynamic HTML pagination using javascript 【发布时间】:2020-01-13 11:51:10 【问题描述】:我有以下分页控件
index.html 中的代码(初始状态):
<ul id="page_paging">
<li><a href="#previous_section"><</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">></a></li>
</ul>
在 javascript 中我附加了一个事件监听器:
document.getElementById("page_paging").addEventListener("click", LoadPages);
然后在函数中,我根据用户点击的内容生成页面列表
function generateUL(minPage, maxPage, newActivePage)
var innerHtml = "<li><a href=\"#previous_section\"><</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\">></a></li>" ;
return innerHtml;
虽然返回的 html 看起来与初始状态“原始的”完全相同 - 控件松散了圆圈之间的空格
结果html:
<ul id="page_paging">
<li><a href="#previous_section"><</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">></a></li>
</ul>
以及控件的外观
有没有人知道为什么会发生这种情况以及如何解决它?
【问题讨论】:
【参考方案1】:结果 HTML 具有不同的 ID(“episode_paging”),因此 CSS 可能不同。 当涉及到代码本身而不是“#previous_section”时,我会使用“数据页”或类似的方法,下面是普通的 JS 样板:
<ul id="episode_paging">
<li><a data-prev="1" href="#"><</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="#">></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>
【讨论】:
“episode_paging”是一个错误的“复制粘贴”,从我的代码到代码中的 *** 两者都具有相同的 ID,我在我的问题中编辑了代码。至于数据页与 href 到 previous_section,一旦用户单击页面滚动到 previous_section 的项目之一,它必须保持原样。【参考方案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\"><</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\">></a></li>" ;
return innerHtml;
【讨论】:
关于代码,同意。 CSS没有改变任何东西:( 尝试把 !important 放到你的 CSS 中【参考方案3】:示例 CSS:
#episode_paging li
padding: 0 2px !important;
#episode_paging li a
padding: 0 2px !important;
【讨论】:
以上是关于使用 javascript 的动态 HTML 分页的主要内容,如果未能解决你的问题,请参考以下文章
javascript实例学习之四——javascript分页