jQuery类按钮点击事件取相邻文本及ChessJS加载PGN报错咨询

1. 基础按钮绑定点击事件需求 #

原有代码错误点 #

• 事件回调内的this是原生DOM对象，没有jQuery提供的next()方法，需要先包装为jQuery对象$(this)
• html是jQuery方法，调用时需要加括号html()，直接写.html取到的是方法本身而非内容
• 缺少将获取到的内容写入#show容器的逻辑

正确实现代码 #

// 如果需要myVar全局可访问，可在外部声明
let myVar;
$(".games").click(function(){
  // 取相邻下一个p节点的文本
  myVar = $(this).next("p").text();
  // 写入show容器
  $("#show").text(myVar);
})

如果不需要保留HTML标签，优先用text()而非html()，避免XSS风险

2. 进阶chessJS加载PGN需求 #

报错原因 #

pgn_replace is not a function是chessJS内部报错，触发原因是你传入load_pgn的参数不是合法的PGN字符串：

• 你之前的实现大概率没有正确获取p标签的纯文本内容，可能取到了DOM对象、带HTML标签的内容，或者有多余空白字符
• 你最终实现里的this.textContent = $(this).html();是冗余代码，反而会改写原p标签的内容，如果原内容有HTML特殊字符会导致PGN格式被破坏，完全不需要写这行

最优实现代码 #

$('.someGames').click(function(){
  // 直接取当前点击p标签的纯文本内容，trim去掉前后多余空白
  const pgnStr = $(this).text().trim();
  // 初始化chess实例并加载PGN
  const chess = new Chess();
  chess.load_pgn(pgnStr);
  // 后续chessboardJS渲染逻辑按需补充
})

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