如何在JavaScript不同点击事件函数间访问变量imdid？

嘿，这个问题其实是JavaScript变量作用域的典型场景～你现在的imdid是定义在.img-upload点击事件的函数内部，属于局部变量，所以另一个点击事件的函数根本访问不到它。下面给你几种简单可行的解决办法：

方法1：提升变量到共同的父作用域 #

把imdid定义在两个点击事件的共同父作用域（也就是$(document).ready()函数内部），这样两个点击回调都能访问到这个变量：

$(document).ready(function() {
  // 把变量定义在两个点击事件的共同父作用域中
  let imdid; 

  $(".img-upload").click(function(){
    // 直接给外部作用域的imdid赋值，不用再声明var/let
    imdid = $(this).attr("imgid"); 
  });

  $(".img-gallary").click(function(){
    var imgsrc = $(this).attr("src");
    alert(imgsrc);
    
    // 注意：如果用户先点击画廊按钮，imdid会是undefined，建议加个判断
    if (imdid) {
      alert(imdid);
    } else {
      alert("请先点击图片上传按钮哦");
    }
  });
});

方法2：用jQuery的data()方法绑定数据到DOM #

这种方法更优雅，把数据和DOM元素绑定，避免额外的全局变量，还能让数据和对应的元素关联起来：

$(document).ready(function() {
  $(".img-upload").click(function(){
    let imdid = $(this).attr("imgid");
    // 把imdid存储到全局元素（比如body）上，或者你也可以存储到特定的目标元素
    $("body").data("currentImageId", imdid);
  });

  $(".img-gallary").click(function(){
    var imgsrc = $(this).attr("src");
    alert(imgsrc);
    
    // 从存储的DOM元素中取出数据
    let imdid = $("body").data("currentImageId");
    alert(imdid);
  });
});

如果你的上传按钮和画廊是一一对应的，也可以把数据存储到当前点击的.img-upload元素上，之后通过关联关系取出，这样更精准。

方法3：用闭包封装状态（进阶方案） #

如果你的项目需要管理更多和图片相关的状态，用闭包封装起来会让代码更清晰，避免变量污染：

$(document).ready(function() {
  // 用立即执行函数创建闭包，封装图片状态
  const imageState = (function() {
    let imdid;
    return {
      // 设置图片ID的方法
      setImageId: function(id) {
        imdid = id;
      },
      // 获取图片ID的方法
      getImageId: function() {
        return imdid;
      }
    };
  })();

  $(".img-upload").click(function(){
    imageState.setImageId($(this).attr("imgid"));
  });

  $(".img-gallary").click(function(){
    var imgsrc = $(this).attr("src");
    alert(imgsrc);
    alert(imageState.getImageId());
  });
});

根据你的场景选择就好啦，如果只是简单的共享变量，方法1或2完全够用～

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