点击事件为URL追加参数时全局变量无法存储选中值如何解决

需要实现的逻辑：根据页面选中的选项值为当前URL追加对应参数，参数值通过点击事件设置，不同参数的选择逻辑互相独立。
当前遇到的问题：已定义全局变量存储点击事件获取的选中值，但实际运行时值无法被正常存储，无法正确拼接URLSearchParams参数字符串。

原有实现代码存在3个核心错误：

• 点击事件回调内重复使用var声明和全局变量同名的局部变量，赋值操作仅在函数内部生效，无法修改全局变量的值
• URLSearchParams实例在页面初始加载阶段就完成初始化，此时还未触发任何点击操作，永远只能拿到变量初始的undefined值，不会随点击动态更新
• 取消选项选中的逻辑分支中，没有同步清空对应全局变量的值，会出现取消选中后参数仍残留旧值的问题

// 全局存储两个选项的选中值，初始状态为未定义
let btn0;
let btn1;

/**
 * 统一更新URL参数逻辑，每次选中状态变化后调用
 */
function refreshSearchParams() {
  const params = new URLSearchParams();
  // 仅当选项有选中值时才追加对应参数，避免生成无效的undefined参数
  if (btn0 !== undefined) {
    params.append('var0', btn0);
  }
  if (btn1 !== undefined) {
    params.append('var1', btn1);
  }
  const paramStr = params.toString();
  console.log(paramStr);
  // 若需要直接同步更新当前页面地址，可放开下面注释
  // const newUrl = paramStr ? `?${paramStr}` : window.location.pathname;
  // window.history.replaceState(null, '', newUrl);
}

// 绑定第一组按钮点击事件
$('.btn0').click(function () {
  const $currentBtn = $(this);
  if ($currentBtn.attr('data-selected') === 'true') {
    // 取消当前选中状态
    $currentBtn.attr('data-selected', 'false').removeClass('selected');
    btn0 = undefined;
  } else {
    // 切换选中状态：先清空同组其他按钮的选中态，再选中当前按钮
    $currentBtn.closest('tr').find('.btn0').not(this)
      .removeClass('selected').attr('data-selected', 'false');
    $currentBtn.attr('data-selected', 'true').addClass('selected');
    // 直接给全局变量赋值，不要加var声明局部变量
    btn0 = $currentBtn.data("value");
  }
  // 状态变更后刷新参数
  refreshSearchParams();
});

// 绑定第二组按钮点击事件
$('.btn1').click(function () {
  const $currentBtn = $(this);
  if ($currentBtn.attr('data-selected') === 'true') {
    $currentBtn.attr('data-selected', 'false').removeClass('selected');
    btn1 = undefined;
  } else {
    $currentBtn.closest('tr').find('.btn1').not(this)
      .removeClass('selected').attr('data-selected', 'false');
    $currentBtn.attr('data-selected', 'true').addClass('selected');
    btn1 = $currentBtn.data("value");
  }
  refreshSearchParams();
});

• 移除点击回调内的var重复声明：JavaScript中使用var在函数内部声明变量时，会创建函数作用域的局部变量，和外层全局变量完全独立，去掉var后赋值操作才会正确修改全局存储的选中值
• 抽离参数生成逻辑为独立函数，在每次点击触发状态变更后调用：URL参数是随用户选择动态变化的，不能在页面加载时一次性生成，必须在每次选中状态变化后重新计算
• 补全取消选中分支的变量更新：点击已选中按钮取消选择时，同步清空对应全局变量的值，避免参数残留之前选中的旧值
• 增加参数有效值判断：未选中对应选项时不追加对应参数，避免生成var0=undefined这类无意义的参数项

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