房间数量选择联动图片上传模块异常求助：仅保留alert时功能正常

我帮你排查了代码，发现两个核心问题导致了这个异常：

问题原因 #

1. 事件执行顺序导致变量未初始化
   你原本依赖focus事件初始化start变量，但当用户直接点击下拉选项时，change事件可能会先于focus事件触发。此时start仍为undefined，经过parseInt转换后变成NaN，而NaN和任何数值比较都会返回false，导致增删模块的逻辑无法执行。而alert(start)会阻塞代码执行，让浏览器有时间处理focus事件，start被正确赋值后功能才暂时正常。

2. 无效的元素选择器
   在删除模块的逻辑中，你使用了$("gallery-item")选择器，但gallery-item是类名而非标签名，正确的选择器应该是$(".gallery-item")，否则无法定位到要删除的元素。

修复方案 #

我们可以通过以下步骤修复：

1. 初始化start变量为下拉框的默认值，不再依赖focus事件；
2. 修正删除模块时的选择器；
3. 优化变量类型转换逻辑，避免出现NaN的情况。

修复后的JavaScript代码 #

(function() {
    // 初始化start为当前下拉框的数值，默认0
    let start = parseInt($("#rooms").val()) || 0;

    $("#rooms").on('change', function() {
        const num = parseInt(this.value) || 0;
        const label = "Room ";
        let elem = "";

        // 删除多余的模块
        if (start > num) {
            for (let i = start; i > num; i--) {
                const rlbl = `${$.trim(label)}-${i}`;
                $(".gallery-item").each(function(index) {
                    const relbl = $(this).attr('elemid');
                    if (relbl === rlbl) {
                        $(this).remove();
                    }
                });
            }
        }

        // 添加新的模块
        if (start < num) {
            for (let i = start; i < num; i++) {
                const itemNum = i + 1;
                const lblTxt = `${label}${itemNum}`;
                const elemId = `${$.trim(label)}-${itemNum}`;
                elem = `<div class="col-md-3 gallery-item" elemid="${elemId}">`;
                elem += `<label>${lblTxt}</label>`;
                elem += '<div class="upload-container">';
                elem += '<input type="file" name="image" class="d-none" accept="image/png, image/tiff, image/jpeg, image/jpg" required/>';
                elem += '<div class="upload">';
                elem += `<img src="" id="${elemId}" class="d-none" />`;
                elem += '</div>';
                elem += '<h5 class="hint"><i class="fa fa-upload text-info" aria-hidden="true"></i> Upload</h5>'
                elem += '</div>';
                elem += '<input name="title[]" class="form-control" placeholder="Photo Title e.g. Master Bedroom" required />';
                elem += '<input name="img-area[]" class="form-control" placeholder="Carpet Area" required />';
                elem += '</div>';
                $('.gallery').append(elem);
            }
        }

        // 更新start为当前选中的数值
        start = num;
    });
})();

额外优化点 #

• 使用let/const替代var，提升变量作用域的合理性；
• 用模板字符串拼接HTML，提升代码可读性；
• 每次change事件结束后，将start更新为当前选中的数值，确保下次操作的基准正确。

现在测试修复后的代码，不管是否注释alert，都能正常根据下拉框的选择动态增减图片上传模块了。

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