如何使用jQuery将onclick函数的值传递到全局作用域？

首先得指出你现有代码里的问题：你直接调用grab()的时候，这个函数并不是在按钮点击的上下文里执行的，this不会指向按钮元素，而且点击事件还没触发，自然拿不到想要的值。下面给你几种可行的实现方式，从简单到更优雅的都有：

方案1：声明全局变量存储值 #

这是最直接的方式，先在全局作用域定义一个变量，然后在点击事件里给它赋值，之后就能在全局访问了：

// 全局作用域声明变量
let buttonValue;

$('.button').on('click', function grab() {
  // 把按钮的值赋值给全局变量
  buttonValue = this.value;
});

// 注意：只有在按钮点击过后，buttonValue才会有值
// 比如你可以在后续的某个操作里使用它，比如另一个按钮点击事件
$('#getValueBtn').on('click', function() {
  console.log(buttonValue);
});

方案2：使用回调函数（更推荐，避免全局污染） #

如果不想污染全局作用域，用回调函数是更好的选择。把需要使用这个值的逻辑封装成一个函数，在点击事件里调用它并传入值：

// 定义处理值的函数
function handleButtonValue(value) {
  console.log('拿到的按钮值：', value);
  // 这里可以写你需要用这个值做的所有操作
}

$('.button').on('click', function() {
  // 点击时把值传给处理函数
  handleButtonValue(this.value);
});

方案3：用jQuery的.data()绑定到元素（适合和元素关联的场景） #

如果这个值只需要和按钮元素关联，后续可以通过元素获取，那可以用jQuery的data()方法存储：

$('.button').on('click', function() {
  // 把值存储到按钮元素上
  $(this).data('buttonValue', this.value);
});

// 之后需要的时候，通过元素获取
// 比如点击另一个按钮获取第一个按钮的值
$('#getValueBtn').on('click', function() {
  const value = $('.button').data('buttonValue');
  console.log(value);
});

另外要提醒你：不要像你原来那样直接调用事件处理函数grab()，因为只有当用户点击按钮时，这个函数才会在正确的上下文（this指向按钮）里执行，直接调用是拿不到正确值的。

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