jQuery中如何实现每次函数运行时给变量追加新值且不丢失旧值？

问题核心说明 #

你现有代码的问题是dataCollection被定义在点击事件的回调函数内部，属于函数局部变量，每次触发点击事件都会重新初始化，函数执行完毕后变量就会被销毁，无法保留上一次运行的数值。你可以通过以下几种常用方案实现需求：

方法1：外部作用域变量存储（最简单易用）

把存储集合的变量定义在事件回调的外部作用域中，每次点击直接往里面追加值即可，推荐用数组存储方便后续处理列表数据：

<!-- 该div的数值会被其他点击事件修改 -->
<div class="data">204</div>

// 定义在回调函数外部，不会每次点击被重置
const dataCollection = []
$(".button").on('click', function(){
  const data = $('.data').text();
  // 向数组追加当前新值
  dataCollection.push(data)
  // 输出所有存储的历史数据列表
  console.log(dataCollection);
});

如果你需要的是拼接成字符串格式，只需要把初始值设为空字符串let dataCollection = ''，每次追加时用dataCollection += data即可。

方法2：闭包存储（避免全局作用域污染）

如果不想声明全局变量，可以用立即执行函数创建闭包空间存储变量：

(function(){
  const dataCollection = []
  $(".button").on('click', function(){
    const data = $('.data').text();
    dataCollection.push(data)
    console.log(dataCollection);
  });
})()

方法3：绑定到DOM元素自定义数据属性

不需要额外声明变量，直接把数据绑定到对应DOM元素的data属性上存储：

$(".button").on('click', function(){
  const data = $('.data').text();
  // 先读取之前存储的集合，没有的话初始化为空数组
  const dataCollection = $(this).data('collection') || []
  dataCollection.push(data)
  // 把更新后的集合存回元素的data属性
  $(this).data('collection', dataCollection)
  console.log(dataCollection);
});

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