JS/JQuery如何提取change函数内的rezept变量供后续外部函数调用

你遇到的是JavaScript函数作用域的问题，change回调内部用var声明的rezept属于局部变量，仅能在回调函数内部访问，有两种常用的实现方案： #

方案1：提升变量到公共父作用域（推荐） #

直接在$(document).ready的顶层作用域声明变量，回调内部直接赋值即可，同一ready作用域下的所有函数都可以访问该变量：

$(document).ready(function () {
    // 顶层作用域声明变量，作用范围覆盖整个ready回调内的所有逻辑
    var rezept;

    $("select#rezept").change(function () {
        // 直接赋值，不要加var，避免生成局部变量覆盖外层变量
        rezept = $(this).children("option:selected").val();
        console.log(rezept);
    });

    // 示例：其他需要调用rezept的函数
    function calcIngredients() {
        // 注意：只有change事件触发过之后，rezept才会有有效值
        if (!rezept) return alert("请先选择食谱");
        // 后续计算逻辑
        console.log("当前选中的食谱：", rezept);
    }
})

如果需要页面加载完成就拿到默认选中的食谱值，可以在绑定事件后手动触发一次change：
$("select#rezept").trigger("change") #

方案2：挂载到全局对象（仅跨作用域场景使用） #

如果需要在$(document).ready外部的逻辑也访问该变量，可以挂载到window全局对象上，缺点是会造成全局变量污染，非必要不推荐：

$("select#rezept").change(function () {
    // 挂载到window后，任意位置都可以通过window.rezept访问
    window.rezept = $(this).children("option:selected").val();
    console.log(rezept);
});

• 调用rezept前要先判断是否有值，避免change事件未触发时拿到undefined导致逻辑报错
• 赋值时不要在回调内部重复用var/let/const声明rezept，否则会生成独立的局部变量，不会更新外部的变量值

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