jQuery实现加载更多时可见元素计数不更新及显示总数量问题

根因说明 #

• 计数逻辑触发时机错误：原代码点击加载按钮后先执行计数，再执行元素显示操作，所以每次统计的都是操作前的可见元素数量，导致更新延迟。
• slideDown为异步动画，动画未完成时元素不会被:visible选择器识别，直接在动画执行后立刻计数也会出现统计错误。
• 总数量需要提前统计全部.content元素的长度，不受显隐状态影响。

修复后代码 #

$(document).ready(function () {
  // 提前统计所有.content元素的总数量
  const totalCount = $(".content").length;
  function articlecount() {
    const visibleCount = $(".content:visible").length;
    // 按要求格式输出：可见数量 of 总数量
    $("#count").html(`Count : ${visibleCount} of ${totalCount}`);
  }

  $(".content").slice(0, 12).show();
  articlecount();
  $("#loadMore").on("click", function (e) {
    e.preventDefault();
    const $hiddenContents = $(".content:hidden");
    // 把计数放到slideDown的完成回调里，等元素完全显示后再统计
    $hiddenContents.slice(0, 12).slideDown(400, function() {
      articlecount();
    });
    
    if ($hiddenContents.length <= 12) {
      $("#loadMore").text("No Content").addClass("noContent");
    }
  });
});

改动点说明 #

• 页面初始化时提前统计所有.content元素的总数量，直接固定存储，不受后续显隐操作影响，满足总数量展示需求。
• 调整计数逻辑的执行时机，放到slideDown的动画完成回调中，确保元素完全显示后再统计可见数量，不会出现更新延迟。
• 优化加载完毕的判断逻辑，判断剩余隐藏元素数量是否小于等于本次要加载的12个，提前更新按钮状态，避免最后一次点击后按钮状态未及时修改的问题。

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