jquery - 使用 .length 获取元素数量不准确？

Question

我正在开发的网站的管理端有一个页面。此页面用于将图像添加到产品列表中。我使用 jQuery 来计算页面上的缩略图数量(等于分配给产品的图片数量)，当有 5 个时，它会删除添加更多图片的按钮。这应该有效地将允许上传的图像数量限制为 5。

“添加图片”菜单分为三个类别。您可以使用 URL、使用之前上传的图像或上传新图像。

我离开页面的唯一一次是上传新图像。上传新图像时，会提交表单并重置页面。由于某种原因，jQuery 没有在重新加载时注册新图像。

它位于脚本顶部附近。该脚本位于外部 JS 文件中，该文件包含在结束正文标记之前:

var pictureCount = $(".thumbnail-container").length;
if (pictureCount == 5) {
    $("#add-picture").hide();
} else {
    $("#add-picture").show();
}

每当添加先前上传的图像或从 URL 添加图像时都会调用此函数。 (我还使用相同的功能来减少删除缩略图时的图片数量):

var removeAddButton = function(operator) {
    if (operator == "+") {
        pictureCount++;
    } else if (operator == "-") {
        pictureCount--;
    }
    if (pictureCount == 5) {
        $("#add-picture").hide();
    } else {
        $("#add-picture").show();
    }
};

每个缩略图都有一张图片，以及一个用于删除缩略图的按钮，该按钮位于 div 中，具有 thumbnail-container 类。通过将变量定义为缩略图容器类的元素数量，当页面刷新时(上传图片并通过 POST 时)，页面应该加载并知道有多少张图片。

但是，在我上传图像后，计数仍然为 0。如果我上传另一张图像，计数为 1。我已通过警报和控制台日志确认了这一点。奇怪的是，如果我运行第一个代码片段，但将其放在 window.onload 匿名函数中，则页面知道重新加载的计数。但是，当我将代码段包装在 window.onload 中时，第二个代码段不会影响调用函数时的计数。

这是为什么呢？我该如何解决这个问题？

附注

上传新图像后，PHP 负责将新缩略图添加到页面。由于 PHP 在 JS 启动之前完成，因此它应该知道计数。

Answer 1

如果第一个脚本位于窗口加载事件处理程序内，那么如果它正在工作，那么您可以创建 pictureCount 作为全局变量，如下所示，然后在加载事件处理程序上设置其初始值，以便removeAddButton 将能够访问它

var pictureCount = 0;
$(window).load(function () {
    pictureCount += $(".thumbnail-container").length;
    $("#add-picture").toggle(pictureCount != 5);
});

var removeAddButton = function (operator) {
    if (operator == "+") {
        pictureCount++;
    } else if (operator == "-") {
        pictureCount--;
    }
    $("#add-picture").toggle(pictureCount != 5);
};