JavaScript实现逐个隐藏单张图片的循环功能遇到问题

我正在开发一款游戏，棋盘两侧各设置有5个棋子（图片文件）。游戏运行时，我希望玩家/电脑每次做出选择时，能隐藏其中一个单独的棋子。但按当前JavaScript代码编写的逻辑，当玩家或电脑首次选择方格时，该侧的所有棋子都会消失。

问题根源 #

你用document.getElementsByClassName("Xs")和document.getElementsByClassName("Os")获取的是包含所有棋子的父容器元素，而非单个棋子的DOM节点。执行xS[xMoves].style.visibility = "hidden"时，实际是隐藏了整个父容器，导致容器内所有棋子一同消失。

修复方案 #

1. 修改DOM选择逻辑：改用querySelectorAll获取父容器下的所有单个棋子元素
2. 保留计数逻辑：通过xMoves/oMoves索引，每次只隐藏对应位置的单个棋子

修改后的JavaScript代码 #

let activePlayer = 'X';
let selectedSquares = []; // 存储所有走法，用于判断胜负条件

// 获取所有单个X和O棋子元素
let xSquares = document.querySelectorAll(".Xs img");
let oSquares = document.querySelectorAll(".Os img");
let xMoves = 0;
let oMoves = 0;

function placeXOrO(squareNumber) {
    if (!selectedSquares.some(element => element.includes(squareNumber))) {
        let select = document.getElementById(squareNumber);
        if (activePlayer === 'X') {
            select.style.backgroundImage = 'url("images/nesX.png")';
            // 隐藏对应索引的单个X棋子
            if (xMoves < xSquares.length) {
                xSquares[xMoves].style.visibility = "hidden";
                xMoves++;
            }
        } else {
            select.style.backgroundImage = 'url("images/nesO.png")';
            // 隐藏对应索引的单个O棋子
            if (oMoves < oSquares.length) {
                oSquares[oMoves].style.visibility = "hidden";
                oMoves++;
            }
        }
        selectedSquares.push(squareNumber + activePlayer);
        checkWinConditions(); // 需确保此胜负判断函数已定义
        
        // 切换当前玩家
        activePlayer = activePlayer === 'X' ? 'O' : 'X';
        
        audio('./media/place1.mp3'); // 需确保此音效播放函数已定义
        
        if (activePlayer === 'O') {
            disableClick(); // 需确保此禁用点击函数已定义
            setTimeout(computersTurn, 1000);
        }
        return true;
    }
}

function computersTurn() {
    let success = false;
    let pickASquare;
    while (!success) {
        pickASquare = String(Math.floor(Math.random() * 9));
        if (placeXOrO(pickASquare)) {
            success = true;
        }
    }
}

原HTML结构（无需修改） #

<div class="Xs">
    <img id="x1" src="./images/nesX.png" alt="x1">
    <img id="x2" src="./images/nesX.png" alt="x2">
    <img id="x3" src="./images/nesX.png" alt="x3">
    <img id="x4" src="./images/nesX.png" alt="x4">
    <img id="x5" src="./images/nesX.png" alt="x5">
</div>
<div class="Os">
    <img id="o1" src="./images/nesO.png" alt="o1">
    <img id="o2" src="./images/nesO.png" alt="o2">
    <img id="o3" src="./images/nesO.png" alt="o3">
    <img id="o4" src="./images/nesO.png" alt="o4">
    <img id="o5" src="./images/nesO.png" alt="o5">
</div>

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