如何优化石头剪刀布游戏中元素类的切换逻辑代码？

首先明确：当选中另一个元素时，完全可以移除其他元素的类，你的代码可以通过以下几种方式大幅简化，避免重复的classList.remove()调用：

优化方案1：先统一移除所有候选元素的类，再为选中元素添加类 #

把电脑的三个选择元素统一管理，先批量移除computerActive类，再只给当前选中的元素添加该类。这样不管选中哪一个，都只需要两次核心操作，不用写冗余的条件分支：

function getComputerChoice() {
    const choices = ["Scissors", "Paper", "Rock"];
    const selection = choices[Math.floor(Math.random() * choices.length)];
    
    // 统一获取所有电脑选择元素
    const computerChoices = document.querySelectorAll("[id^='computer']");
    // 批量移除高亮类
    computerChoices.forEach(el => el.classList.remove("computerActive"));
    
    // 根据选中项找到对应元素并添加高亮类
    const selectedEl = document.querySelector(`#computer${selection}`);
    selectedEl.classList.add("computerActive");
    
    return selection;
}

这里用到querySelectorAll("[id^='computer']")一次性获取所有以computer开头ID的元素，遍历移除类；再用模板字符串拼接选择器找到选中的元素，一步添加类。

优化方案2：直接定位当前高亮的元素并移除类 #

如果页面中始终只有一个元素会拥有computerActive类，也可以直接找到这个元素并移除类，再给新选中的元素添加：

function getComputerChoice() {
    const choices = ["Scissors", "Paper", "Rock"];
    const selection = choices[Math.floor(Math.random() * choices.length)];
    
    // 移除当前高亮元素的类（如果存在）
    const currentActive = document.querySelector(".computerActive");
    if (currentActive) {
        currentActive.classList.remove("computerActive");
    }
    
    // 给新选中的元素添加高亮类
    document.querySelector(`#computer${selection}`).classList.add("computerActive");
    
    return selection;
}

这种方式更高效，不用遍历所有元素，只操作当前高亮和新选中的两个元素。

额外建议：元素与选项的映射优化 #

如果想让代码更健壮，可以提前建立选项和元素的映射关系，避免依赖ID命名规则：

// 提前在函数外定义映射，避免每次调用都重新查询DOM
const choiceElements = {
    Rock: document.querySelector("#computerRock"),
    Paper: document.querySelector("#computerPaper"),
    Scissors: document.querySelector("#computerScissors")
};

function getComputerChoice() {
    const choices = Object.keys(choiceElements);
    const selection = choices[Math.floor(Math.random() * choices.length)];
    
    // 移除所有元素的高亮类
    Object.values(choiceElements).forEach(el => el.classList.remove("computerActive"));
    // 给选中元素添加高亮类
    choiceElements[selection].classList.add("computerActive");
    
    return selection;
}

这种方式把DOM查询逻辑抽离到函数外，避免重复查询，同时让选项和元素的对应关系更清晰。

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