为何控制台无日志输出？三连单元格匹配逻辑疑问

你的判断不完全正确——单次点击确实无法直接形成三个匹配的组合，但这不是控制台完全没有日志输出的核心原因，代码里的URL匹配逻辑错误才是关键问题。

核心问题 #

• src属性的匹配错误：cells[a].src返回的是浏览器解析后的完整绝对URL（比如http://your-domain.com/Small_uppercase_letter_X.svg.png），而你直接和相对路径字符串"Small_uppercase_letter_X.svg.png"做全等比较，永远不会成立，这导致即使三个单元格都设置了X，控制台也不会输出日志。
• 单次点击的匹配逻辑：没错，单次点击只会修改当前单元格的src，不可能立刻满足三个X的条件，所以第一次点击后不会触发日志，但这个问题只会影响首次点击，不会导致三次匹配后依然无输出。

修复方案 #

1. 修正src匹配方式：用endsWith()方法匹配文件名，或者用getAttribute('src')获取原始设置的相对路径（注意后者在浏览器自动补全路径的情况下可能仍有问题，推荐用endsWith()）。
2. 优化匹配逻辑：用find()直接定位获胜组合，让代码更简洁高效。

修改后的代码示例 #

const cells = document.querySelectorAll(".cell > img");

const win_combinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
];

cells.forEach((cell, index) => {
  cell.addEventListener("click", function () {
    const targetImg = "Small_uppercase_letter_X.svg.png";
    this.src = targetImg;

    // 查找是否存在获胜组合
    const winningGroup = win_combinations.find(([a, b, c]) => {
      return cells[a].src.endsWith(targetImg) &&
             cells[b].src.endsWith(targetImg) &&
             cells[c].src.endsWith(targetImg);
    });

    if (winningGroup) {
      const winningCells = winningGroup.map(idx => cells[idx]);
      console.log("匹配的单元格：", ...winningCells);
    }
  });
});

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