WordPress自定义HTML分页异常：需原生JS实现字母排序+每页5条

当前你已实现分类卡片的字母排序，但分页依赖jQuery且无法正常工作，以下是改用原生JavaScript实现的完整代码，满足每页显示5条内容的需求：

<div class="flowercontainer">
    <div class="flowercard">
        <a href="#" target="_blank" rel="noopener"><div class="card-image rose"></div></a>
        <div class="flowername"><a href="#" target="_blank" rel="noopener">ROSE</a></div>
    </div>
    <div class="flowercard">
        <a href="#" target="_blank" rel="noopener"><div class="card-image jasmine"></div></a>
        <div class="flowername"><a href="#" target="_blank" rel="noopener">JASMINE</a></div>
    </div>
    <div class="flowercard">
        <a href="#" target="_blank" rel="noopener"><div class="card-image orchid"></div></a>
        <div class="flowername"><a href="#" target="_blank" rel="noopener">ORCHID</a></div>
    </div>
    <!-- 可继续添加更多flowercard项 -->
</div>

<div class="pagination">
    <button class="page-btn previous-page" disabled>Prev</button>
    <div class="page-numbers"></div>
    <button class="page-btn next-page">Next</button>
</div>

<style>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.flowercontainer {
    display: flex;
    justify-content: center;
    padding: 15px;
    flex-wrap: wrap;
}
.flowercard {
    background: white;
    width: 220px;
    height: 400px;
    margin: 12px;
    border-radius: 15px;
    outline: #8224e3 solid 5px;
}
.card-image {
    background-color: purple;
    height: 300px;
    margin-bottom: 15px;
    background-size: cover;
    border-radius: 15px 15px 0 0;
}
.flowername {
    padding: 0;
    color: purple;
    display: flex;
    justify-content: center;
    font-size: 20px;
}
.rose {
    background-image: url(rose.jpg);
}
.jasmine {
    background-image: url(jasmine.jpg);
}
.orchid {
    background-image: url(orchid.jpg);
}
/* 分页样式 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}
.page-btn {
    padding: 8px 16px;
    border: 1px solid #8224e3;
    border-radius: 4px;
    background: white;
    color: #8224e3;
    cursor: pointer;
}
.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.page-number {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
.page-number.active {
    background: #8224e3;
    color: white;
    border-color: #8224e3;
}
.page-dots {
    padding: 8px 4px;
    color: #8224e3;
}
</style>

<script>
// 1. 字母排序逻辑（保留原有效代码）
const container = document.querySelector(".flowercontainer");
const getFlowerName = (card) => card.querySelector(".flowername").textContent.trim();

Array.from(container.children)
     .sort((a, b) => getFlowerName(a).localeCompare(getFlowerName(b)))
     .forEach(child => container.appendChild(child));

// 2. 原生JS分页逻辑
const cards = Array.from(document.querySelectorAll(".flowercard"));
const limitPerPage = 5; // 每页显示5条
const totalPages = Math.ceil(cards.length / limitPerPage);
const paginationNumbers = document.querySelector(".page-numbers");
const prevButton = document.querySelector(".previous-page");
const nextButton = document.querySelector(".next-page");

let currentPage = 1;

// 渲染分页按钮
function renderPaginationNumbers() {
    paginationNumbers.innerHTML = "";

    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, currentPage + 2);

    // 添加首页按钮（如果当前页不是前3页）
    if (startPage > 1) {
        addPageNumber(1);
        if (startPage > 2) {
            addDots();
        }
    }

    // 添加中间页码
    for (let i = startPage; i <= endPage; i++) {
        addPageNumber(i);
    }

    // 添加尾页按钮（如果当前页不是后3页）
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            addDots();
        }
        addPageNumber(totalPages);
    }
}

// 添加单个页码按钮
function addPageNumber(page) {
    const pageNumber = document.createElement("span");
    pageNumber.className = `page-number ${page === currentPage ? "active" : ""}`;
    pageNumber.textContent = page;
    pageNumber.addEventListener("click", () => goToPage(page));
    paginationNumbers.appendChild(pageNumber);
}

// 添加省略号
function addDots() {
    const dots = document.createElement("span");
    dots.className = "page-dots";
    dots.textContent = "...";
    paginationNumbers.appendChild(dots);
}

// 切换到指定页面
function goToPage(page) {
    currentPage = page;
    updateCardsDisplay();
    updatePaginationButtons();
    renderPaginationNumbers();
}

// 更新卡片显示状态
function updateCardsDisplay() {
    cards.forEach((card, index) => {
        card.style.display = index >= (currentPage - 1) * limitPerPage && index < currentPage * limitPerPage 
            ? "block" 
            : "none";
    });
}

// 更新上一页/下一页按钮状态
function updatePaginationButtons() {
    prevButton.disabled = currentPage === 1;
    nextButton.disabled = currentPage === totalPages;
}

// 绑定按钮事件
prevButton.addEventListener("click", () => {
    if (currentPage > 1) {
        goToPage(currentPage - 1);
    }
});

nextButton.addEventListener("click", () => {
    if (currentPage < totalPages) {
        goToPage(currentPage + 1);
    }
});

// 初始化
updateCardsDisplay();
updatePaginationButtons();
renderPaginationNumbers();
</script>

关键修改说明 #

• 移除jQuery依赖，完全改用原生JavaScript实现分页逻辑
• 将每页显示数量设置为5，可通过修改limitPerPage变量调整
• 优化分页按钮显示逻辑，避免页码过多时排版混乱
• 保留原有字母排序逻辑，确保卡片按名称字母顺序排列
• 调整分页按钮样式，与原有卡片风格统一

内容的提问来源于stack exchange，提问作者Andreas Octavianus Kevin