如何在现有职位列表页面实现Load More加载更多功能

以下方案默认你已经把所有职位列表的<li class="job_listing">项全部渲染到了页面中，仅需前端控制显隐即可实现加载更多效果。

1. 修改现有HTML代码 #

<!-- Listings -->
<div class="title-bordered">
    <h2>Our Professionals <small>Latest added</small></h2>
</div>
<div class="job_listings">
    <!-- 给ul添加id方便后续获取元素 -->
    <ul class="job_listings" id="professionalList">
        <li class="job_listing">
            <a href="#">
                <div class="job_img">
                    <img src="images/samples/person1.jpg" alt="" class="company_logo">
                </div>
                <div class="position">
                    <h3>Debbie Bidart</h3>
                    <div class="company">
                        <strong>Paint Removal from Exterior or Interior Surfaces</strong>
                    </div>
                </div>
                <div class="location">
                    <i class="fa fa-location-arrow"></i> Melbourne, AU
                </div>
                <div class="rating">
                    <div class="rating-stars">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <div class="reviews-num">12 Reviews</div>
                </div>
                <ul class="meta">
                    <li class="job-type">Painting</li>
                    <li class="date">
                        Posted 1 month ago
                    </li>
                </ul>
            </a>
        </li>
        <!-- 第2-10个li正常写，第11个及之后的li添加hidden类 -->
        <li class="job_listing hidden">
            <!-- 第11条职位内容 -->
        </li>
        <!-- 剩余所有职位li都加hidden类 -->
    </ul>
</div>

<div class="spacer"></div>

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <!-- 给按钮添加id，修改文字为Load More，阻止默认跳转 -->
        <a class="btn btn-default btn-block" href="javascript:void(0)" id="loadMoreBtn">Load More</a>
    </div>
</div>

<!-- Listings / End -->

2. 补充CSS样式 #

在你的样式文件中添加如下代码，控制隐藏类的显隐：

.hidden {
    display: none !important;
}

3. 添加JavaScript逻辑 #

在页面底部或者脚本文件中添加如下代码实现交互逻辑：

window.addEventListener('load', function() {
    const list = document.getElementById('professionalList');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    const showCount = 10; // 每次加载显示的数量

    function updateLoadMoreStatus() {
        const hiddenItems = list.querySelectorAll('.job_listing.hidden');
        // 没有更多隐藏项时隐藏按钮
        if (hiddenItems.length === 0) {
            loadMoreBtn.classList.add('hidden');
        }
    }

    // 页面初始化统一控制显隐，确保默认只显示前10条
    const allItems = list.querySelectorAll('.job_listing');
    allItems.forEach((item, index) => {
        if (index >= showCount) {
            item.classList.add('hidden');
        } else {
            item.classList.remove('hidden');
        }
    });
    updateLoadMoreStatus();

    // 加载更多按钮点击事件
    loadMoreBtn.addEventListener('click', function() {
        const hiddenItems = list.querySelectorAll('.job_listing.hidden');
        // 每次显示最多10条
        for (let i = 0; i < Math.min(showCount, hiddenItems.length); i++) {
            hiddenItems[i].classList.remove('hidden');
        }
        updateLoadMoreStatus();
    });
});

如果你的项目已经引入了jQuery，可以替换为更简洁的jQuery版本逻辑，核心思路完全一致。

内容的提问来源于stack exchange，提问作者Paul Jones