如何简化9个可切换PHP页面的按钮交互JavaScript代码？

我制作了9个按钮，设置了鼠标悬停指针样式，点击按钮可打开对应PHP文件；当前实现点击后按钮失去指针样式，点击其他按钮恢复，功能正常，但希望简化现有代码。以下是单个按钮的示例代码：

function Postac()
{
    document.getElementById("Okno_Gry").innerHTML='<object data = "Postac.php" width = "100%" height = "100%" ></object>';
    document.getElementById('PrzyciskPostac').removeAttribute("onclick"), 
    document.getElementById("PrzyciskPostac").style.cursor = "default";
        

    document.getElementById("PrzyciskWarsztat").setAttribute("onclick", "Warsztat()");
    document.getElementById("PrzyciskWarsztat").style.cursor = "pointer";

    document.getElementById("PrzyciskTargowisko").setAttribute("onclick", "Targowisko()");
    document.getElementById("PrzyciskTargowisko").style.cursor = "pointer";

    document.getElementById("PrzyciskArena").setAttribute("onclick", "Arena()");
    document.getElementById("PrzyciskArena").style.cursor = "pointer";

    document.getElementById("PrzyciskWyprawy").setAttribute("onclick", "Wyprawy()");
    document.getElementById("PrzyciskWyprawy").style.cursor = "pointer";

    document.getElementById("PrzyciskLochy").setAttribute("onclick", "Lochy()");
    document.getElementById("PrzyciskLochy").style.cursor = "pointer";

    document.getElementById("PrzyciskGildia").setAttribute("onclick", "Gildia()"), 
    document.getElementById("PrzyciskGildia").style.cursor = "pointer";

    document.getElementById("PrzyciskZamek").setAttribute("onclick", "Zamek()");
    document.getElementById("PrzyciskZamek").style.cursor = "pointer";

    document.getElementById("PrzyciskKopalnie").setAttribute("onclick", "Kopalnie()");
    document.getElementById("PrzyciskKopalnie").style.cursor = "pointer";

}

简化方案 #

1. 统一按钮结构与样式

给所有按钮添加统一类名，用CSS类控制指针状态，避免直接操作元素样式：

<!-- 修改按钮HTML，添加统一类名和数据属性 -->
<button id="PrzyciskPostac" class="game-btn" data-target="Postac.php">角色</button>
<button id="PrzyciskWarsztat" class="game-btn" data-target="Warsztat.php">工坊</button>
<button id="PrzyciskTargowisko" class="game-btn" data-target="Targowisko.php">市场</button>
<!-- 其余6个按钮同理添加class和data-target属性 -->

<div id="Okno_Gry"></div>

/* 基础按钮样式 */
.game-btn {
    cursor: pointer;
}
/* 点击后的禁用状态 */
.game-btn.active {
    cursor: default;
    pointer-events: none; /* 直接禁用点击，无需移除onclick事件 */
}

2. 通用JavaScript逻辑

用单个函数处理所有按钮的点击事件，批量管理按钮状态：

const gameButtons = document.querySelectorAll('.game-btn');
const gameWindow = document.getElementById('Okno_Gry');

// 统一处理按钮点击
function handleBtnClick(e) {
    // 重置所有按钮状态
    gameButtons.forEach(btn => btn.classList.remove('active'));
    // 标记当前按钮为激活状态
    e.currentTarget.classList.add('active');
    // 加载对应PHP文件
    const targetFile = e.currentTarget.dataset.target;
    gameWindow.innerHTML = `<object data="${targetFile}" width="100%" height="100%"></object>`;
}

// 给所有按钮绑定点击事件
gameButtons.forEach(btn => btn.addEventListener('click', handleBtnClick));

简化优势

• 无需编写9个重复的函数，一个通用函数覆盖所有逻辑
• 用CSS类控制样式，符合前端关注点分离原则
• 通过data-*属性传递参数，避免硬编码耦合
• 批量操作元素，代码更简洁易维护，后续新增按钮只需添加相同结构即可

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