JS中能否及如何保存点击的棋子元素供后续移动函数使用？

核心疑问答复 #

完全可以将用户点击的棋子存为变量供后续移动函数调用——这正是你当前“先选棋子、再点落子格”两步交互的标准实现逻辑，没有任何技术阻碍。

适配你现有代码的落地方法 #

结合你已经做好的元素id规则（棋子id为circle+行号+列号、棋盘格沿用同套坐标id规则），可以按最简流程实现：

• 先在你的JS全局作用域（或者模块闭包内）定义两个状态变量，专门存选中的棋子信息：

  // 存当前选中的棋子DOM引用，初始为null代表无选中
  let activePiece = null;
  // 存选中棋子的当前坐标，后续校验走法合法性直接复用
  let activePiecePos = { row: null, col: null };
  

• 给所有棋子元素绑定点击事件：当用户点击属于当前回合可操作的棋子时，从棋子自带的id里解析出对应的行、列值，把DOM元素赋值给activePiece，坐标值存入activePiecePos，之后触发你已经写好的AlertToPressOnSquare提示引导用户选落子格。
• 给所有棋盘格td绑定点击事件：当用户触发格子点击时，首先检查activePiece是否为null——如果为空就触发AlertToPressOnPiece提示引导用户先选棋子；如果已经有选中棋子，就读取当前点击格子的坐标传入走法校验逻辑，判定合法后直接操作activePiece存的DOM元素完成位置移动。
• 单次移动完成后，记得把activePiece和activePiecePos重置为初始的null状态，避免后续交互出现状态残留。

可选优化点 #

• 可以给选中的棋子加个CSS高亮类，让用户直观看到当前选中的元素，降低交互认知成本
• 因为存的是直接的DOM引用，后续移动、修改棋子样式的操作不需要再通过id重新查找DOM，代码执行效率更高
• 如果后续要加拦截逻辑（比如不允许选对方棋子），可以在点击棋子存引用前，先判断元素的类名（redCircle/whiteCircle）和当前回合规则是否匹配，不匹配就不存入状态变量

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