商品加载计数：如何将else值累加到if语句的最新结果中？

架构老林

2026-5-11

解决思路与修改方案

我懂你的问题所在啦——当前代码里的else分支是基于初始显示的8个来计算的，而不是if执行后更新的最新已显示数量，导致逻辑出错。咱们可以通过动态获取当前已显示数量来修复这个问题，具体修改如下：

修改后的JavaScript代码

// 先动态获取当前已显示的项目数（不再硬编码初始的8）
const currentShownItems = $("#spring-products ul li:visible").length;
// 获取当前隐藏的项目数
const hiddenItemsCount = $("#spring-products ul li:hidden").length;

// 先确保总数量已初始化（建议在页面加载时执行一次）
$("#spring-total-items").html($("#spring-products ul li").length);

if (hiddenItemsCount >= 8) {
    // 隐藏数≥8时，在当前已显示数基础上加8
    $("#spring-shown-items").html(currentShownItems + 8);
} else {
    // 隐藏数不足8时，把剩余所有隐藏项加到当前已显示数上
    $("#spring-shown-items").html(currentShownItems + hiddenItemsCount);
}

关键改进点

动态获取已显示数量：用$("#spring-products ul li:visible").length替代硬编码的slice(0,8).length，这样不管之前点击过多少次「加载更多」，都能拿到最新的已显示项目数。
提取重复查询为变量：把隐藏项数量存成变量，既优化了DOM查询性能，也让代码更易读。
补充总数量初始化：页面加载时设置好总项目数，让用户能完整看到「已查看X/Y个项目」的信息。