循环中使用onclick时如何存储变量值？多卡片交互需求

你的核心需求是点击卡片时显示当前卡片的“继续”按钮，同时隐藏上一张选中卡片的按钮，关键要正确保存上一次选中的索引值。下面是具体解决方法：

问题分析 #

原代码存在几个关键问题：

1. 使用var声明循环变量i，由于var的函数作用域特性，所有onclick事件触发时，i的值都会变成循环结束后的10，无法拿到当前点击项的正确索引。
2. 没有专门的变量存储上一次选中的索引k，导致无法定位需要隐藏的按钮。
3. 所有input的id都是inputId，会造成DOM id冲突，引发后续操作问题。

最优解决方案 #

改用let声明循环变量（块级作用域），并在外部维护一个变量保存上一次选中的索引，同时把点击逻辑抽成独立函数，代码更清晰易维护：

// 初始化变量：保存上一次选中的卡片索引，初始值设为-1表示未选中任何卡片
let lastSelectedIndex = -1;
let str = ""; // 假设str初始为空字符串

for (let i = 0; i < 10; i++) {
  // 拼接HTML时，给每个input设置唯一id，点击时调用处理函数并传入当前索引i
  str += `
    <div class='c3lMenuGroup padXLLeft marLTop' width='20%'>
      <input 
        class='wColor' 
        name='inputId' 
        id='inputId_${i}' 
        onclick='handleCardSelect(${i})' 
        align='right' 
        width='100%' 
        type='radio' 
        valign='middle'
      >
    </div>
  `;
}

// 定义点击处理函数
function handleCardSelect(currentIndex) {
  // 如果之前有选中的卡片，隐藏对应的继续按钮
  if (lastSelectedIndex !== -1) {
    document.getElementById(`cont_btn_${lastSelectedIndex}`).style.display = 'none';
  }
  // 显示当前选中卡片的继续按钮
  document.getElementById(`cont_btn_${currentIndex}`).style.display = 'block';
  // 更新上一次选中的索引为当前索引
  lastSelectedIndex = currentIndex;
}

关键说明 #

• 用let代替var：let有块级作用域，循环中每次迭代的i都是独立的，点击时能正确获取当前项的索引。
• 独立处理函数：把点击逻辑从HTML字符串中抽离，避免字符串拼接带来的代码混乱，也方便后续修改维护。
• 唯一id：给每个input设置inputId_${i}，避免DOM id冲突，确保后续操作能精准定位元素。

替代方案（闭包方式，不推荐） #

如果必须保留原有的字符串拼接onclick写法，可以用闭包固定循环变量的值，但可读性较差：

let lastSelectedIndex = -1;
let str = "";

for (var i = 0; i < 10; i++) {
  // 用立即执行函数创建闭包，固定当前的index值
  (function(index) {
    str += `
      <div class='c3lMenuGroup padXLLeft marLTop' width='20%'>
        <input 
          class='wColor' 
          name='inputId' 
          id='inputId_${index}' 
          onclick='
            if (lastSelectedIndex !== -1) {
              document.getElementById("cont_btn_" + lastSelectedIndex).style.display = "none";
            }
            document.getElementById("cont_btn_" + ${index}).style.display = "block";
            lastSelectedIndex = ${index};
          ' 
          align='right' 
          width='100%' 
          type='radio' 
          valign='middle'
        >
      </div>
    `;
  })(i);
}

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