实现Load More功能与标签过滤系统兼容的技术咨询

核心问题分析 #

原代码存在三个关键问题：

• 未区分「过滤隐藏的卡片」和「未加载的卡片」，操作时会误把过滤掉的卡片当成待加载项处理
• 每次点击过滤选项都会重复绑定#loadMore的点击事件，导致按钮被点击一次触发多次加载
• 过滤逻辑未筛选目标卡片，直接操作所有.card元素，导致不符合条件的卡片也被显示

修正后的完整代码及说明 #

假设你的页面元素满足以下条件：

• 每个.card有data-tag属性标记所属分类（如 <div class="card" data-tag="design">...</div>）
• 每个过滤选项.portfolio-flters li有data-filter属性对应分类（全选项设为data-filter="all"，如 <li data-filter="all">全部</li>）

1. 初始化与通用加载函数 #

先把加载更多的逻辑封装成独立函数，避免重复代码：

// 封装加载更多逻辑：传入要处理的卡片集合，每次显示前4个未加载的
function loadMoreCards($targetCards) {
    // 筛选出未显示的卡片，显示前4个
    $targetCards.filter(':not(.display)').slice(0, 4).addClass('display');
    // 检查是否还有未加载的目标卡片
    if ($targetCards.filter(':not(.display)').length === 0) {
        $('#loadMore').hide(); // 用hide而非remove，方便后续过滤后重新显示
    } else {
        // 滚动到加载按钮位置
        $('html,body').animate({
            scrollTop: $('#loadMore').offset().top
        }, 1500);
    }
}

// 页面初始化
$(function () {
    const $allCards = $('.card');
    // 初始显示所有卡片的前4个
    loadMoreCards($allCards);

    // 加载按钮仅绑定一次点击事件
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        // 获取当前激活的过滤条件
        const activeFilter = $('.portfolio-flters li.active').data('filter');
        let $targetCards;
        // 根据过滤条件筛选目标卡片
        if (activeFilter === 'all') {
            $targetCards = $allCards;
        } else {
            $targetCards = $allCards.filter(`[data-tag="${activeFilter}"]`);
        }
        // 执行加载逻辑
        loadMoreCards($targetCards);
    });
});

2. 过滤功能修正 #

$('.portfolio-flters li').click(function () {
    // 标记当前激活的过滤选项
    $('.portfolio-flters li').removeClass('active');
    $(this).addClass('active');
    
    const currentFilter = $(this).data('filter');
    const $allCards = $('.card');
    
    // 重置所有卡片状态：隐藏并移除显示标记
    $allCards.removeClass('display').hide();
    
    let $filteredCards;
    // 根据筛选条件获取目标卡片
    if (currentFilter === 'all') {
        $filteredCards = $allCards;
    } else {
        $filteredCards = $allCards.filter(`[data-tag="${currentFilter}"]`);
    }
    
    // 显示筛选后卡片的前4个
    $filteredCards.slice(0, 4).addClass('display').show();
    
    // 根据筛选结果控制加载按钮显示
    if ($filteredCards.length > 4) {
        $('#loadMore').show();
    } else {
        $('#loadMore').hide();
    }
});

关键改动说明 #

• 封装加载函数：将加载逻辑抽离，过滤后可直接复用，避免代码冗余
• 区分状态：过滤时先重置所有卡片状态，再筛选目标卡片，确保只处理符合条件的内容
• 单次事件绑定：加载按钮的点击事件仅初始化时绑定一次，避免重复触发问题
• 优化按钮显示：用hide()/show()替代remove()，过滤后有更多内容时可重新显示按钮

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