JS实现井字棋：为何if语句未排除已赋值元素，仍打印全部元素？

开发者阿泽

2026-7-7

问题原因及解决办法

核心问题

你遇到的问题是**cell.src返回的是浏览器解析后的完整绝对URL**，但你拿它和相对路径字符串"Small_uppercase_letter_X.svg.png"做比较，两者永远不会相等，所以所有img元素都会被判定为符合条件，进而被打印。

举个例子：当你设置this.src = "Small_uppercase_letter_X.svg.png"后，浏览器会把它转换成类似http://your-domain.com/Small_uppercase_letter_X.svg.png的完整路径，而你判断时用的是短路径，自然匹配不上。

解决办法

方法1：用`getAttribute('src')`获取原始路径

这个方法直接获取你设置的相对路径，不会被浏览器解析：

function computerChoice() {
  for (let cell of cells) {
    // 如果初始img没有src，getAttribute会返回null，可根据需求调整判断逻辑
    if (cell.getAttribute('src') !== "Small_uppercase_letter_X.svg.png") {
      console.log(cell);
    }
  }
}

方法2：用自定义标记替代路径判断（更推荐）

依赖src判断容易受URL变化影响，用dataset标记单元格状态更可靠：

const cells = document.querySelectorAll("img");
cells.forEach(function (cell) {
  cell.addEventListener("click", manChoice, false);
});
function manChoice() {
  this.src = "Small_uppercase_letter_X.svg.png";
  this.dataset.status = "occupied"; // 标记为已占用

  // 纠正setTimeout的参数顺序：第一个是函数，第二个是延迟时间
  setTimeout(computerChoice, 1000);
}
function computerChoice() {
  for (let cell of cells) {
    if (!cell.dataset.status) { // 判断是否未被标记
      console.log(cell);
    }
  }
}