如何在jQuery中声明可后续使用的变量？解决变量丢失问题

这个问题其实是JavaScript作用域的典型问题，我来帮你拆解一下：

你当前的代码里，id变量是在.credit_btn的点击事件函数内部用var声明的——根据JavaScript的函数作用域规则，这个变量的生命周期和访问范围只局限在那个点击函数里，外部的.myBtn点击事件自然访问不到它，所以才会出现"变量丢失"的情况。

下面给你两种常用的解决方案：

方案1：将变量提升到共享作用域 #

把变量声明移到两个事件函数的共同外部作用域里（比如$(document).ready()的内部），这样两个事件都能访问和修改这个变量：

$(document).ready(function() {
  // 把变量提升到共享作用域，不要在事件内部重新声明
  let id;
  let test_id;

  $('.credit_btn').on('click', function() {
    // 直接赋值，去掉前面的var/let
    id = $(this).prop("value");
    test_id = $(this).parent().parent().attr("id");

    $('.modal-container').load('modalbox.php?id=' + id, '&position_id=' + test_id, function() {
      $('#myModal').modal({ show: true });
    });
  });

  $(document).on("click", ".myBtn", function() {
    alert(id); // 现在可以正常访问到变量了
  });
});

方案2：用元素的data属性存储值（更推荐） #

如果担心多个按钮点击会覆盖变量值，或者想让数据和DOM元素绑定，可以把id存储到模态框元素的data-*属性里，需要时再读取：

$(document).ready(function() {
  $('.credit_btn').on('click', function() {
    const id = $(this).prop("value");
    const test_id = $(this).parent().parent().attr("id");

    $('.modal-container').load('modalbox.php?id=' + id, '&position_id=' + test_id, function() {
      // 把id存储到模态框的data属性中
      $('#myModal').data('credit-id', id);
      $('#myModal').modal({ show: true });
    });
  });

  $(document).on("click", ".myBtn", function() {
    // 从模态框读取存储的id
    const id = $('#myModal').data('credit-id');
    alert(id);
  });
});

两种方案的小提示： #

• 方案1适合简单场景，但如果同时打开多个模态框或者频繁点击不同的.credit_btn，变量会被覆盖；
• 方案2把数据和DOM元素绑定，更安全灵活，尤其是涉及多个实例的场景。

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