如何在函数外部获取JS函数内的id值并设置动态输入框值

现有代码 #

function get_data_mapping_for_id(path) {

    let id = $(path).attr('data-map-id');

    Swal.fire({
        title: 'Loading data...',
        willOpen: function() {

            $('.site-plan').addClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').addClass("highlight-path")

            Swal.showLoading();
            $.get(endPoint, {
                action: 'get_data_mapping_for_id',
                id
            }, function(data) {
                Swal.hideLoading();
                jsonResp = JSON.parse(data);
                const table = jsonToHTMLTable(jsonResp, $(path));
                Swal.update({
                    title: jsonResp.title,
                    html: table,
                    confirmButtonText: 'OK'
                });
            });
        },
        willClose: function() {
            $('.site-plan').removeClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').removeClass("highlight-path");
        }
    });
}

遇到的问题 #

需要用函数内的id值设置动态输入框#pIP的内容，但尝试以下操作均未达到预期：

• 函数外部直接赋值：$('#pIP').val("8"); 有效
• 函数内部直接赋值：$('#pIP').val("8"); 无效
• 函数外部用id赋值：$('#pIP').val(id); 无效
• 函数内部用id赋值：$('#pIP').val(id); 无效

解决方案 #

1. 先解决函数内部赋值无效的问题

函数内部赋值无效，大概率是因为输入框#pIP是动态生成的（比如在Swal的html参数里创建），执行赋值代码时输入框还未挂载到DOM中。

你可以把赋值代码放到Swal.update之后，确保输入框已存在：

// 在$.get的成功回调里添加赋值逻辑
function(data) {
    Swal.hideLoading();
    jsonResp = JSON.parse(data);
    const table = jsonToHTMLTable(jsonResp, $(path));
    Swal.update({
        title: jsonResp.title,
        html: table,
        confirmButtonText: 'OK'
    });
    // 此时Swal内容已更新，输入框存在，直接赋值
    $('#pIP').val(id);
}

2. 在函数外部获取该ID的两种方法

方法一：将ID暴露到全局作用域（快速解决，不推荐大型项目使用）

把函数内的let id = ...改为全局变量声明：

// 函数内部修改这一行
window.mapId = $(path).attr('data-map-id');

之后在函数外部，只要确保get_data_mapping_for_id已经执行过，就可以直接使用：

$('#pIP').val(window.mapId);

方法二：使用回调函数（更规范的模块化写法）

修改函数，增加回调参数，在合适的时机将ID传递出去：

function get_data_mapping_for_id(path, callback) {
    let id = $(path).attr('data-map-id');

    Swal.fire({
        title: 'Loading data...',
        willOpen: function() {
            $('.site-plan').addClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').addClass("highlight-path");

            Swal.showLoading();
            $.get(endPoint, {
                action: 'get_data_mapping_for_id',
                id
            }, function(data) {
                Swal.hideLoading();
                jsonResp = JSON.parse(data);
                const table = jsonToHTMLTable(jsonResp, $(path));
                Swal.update({
                    title: jsonResp.title,
                    html: table,
                    confirmButtonText: 'OK'
                });
                // 在这里调用回调，确保数据加载完成后再处理
                if (typeof callback === 'function') {
                    callback(id);
                }
            });
        },
        willClose: function() {
            $('.site-plan').removeClass("zoom-svg");
            $('path[data-map-id="' + id + '"]').removeClass("highlight-path");
        }
    });
}

调用函数时传入回调，在回调里处理ID：

// 调用示例，替换yourPath为实际路径参数
get_data_mapping_for_id(yourPath, function(id) {
    $('#pIP').val(id);
});

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