如何用JavaScript实现点击按钮同时切换图片与子类描述文本

第一步：修正HTML按钮的规范问题 #

HTML里多个按钮共用同一个id="subclass"不符合规范（页面中id必须唯一），我们把它替换为class，同时给每个按钮的点击事件传递必要的参数：

<div id="Subclasses" class="tabcontentMain">
    <h3>Subclasses</h3>
    <p>
        <button class="subclass-btn" onclick="updateSubclass('./assets/010.-Arbalest.png', 'Arbalest', 'Arbalest是擅长远程精准打击的子类，依靠重型弩箭造成高额穿刺伤害。')">Arbalest</button>
        <br><br>
        <button class="subclass-btn" onclick="updateSubclass('./assets/011.-Dreadnaught.png', 'Dreadnought', 'Dreadnought是重装防御型子类，身披厚甲，能承受大量伤害同时保护队友。')">Dreadnought</button>
        <br><br>
        <button class="subclass-btn" onclick="updateSubclass('./assets/012.-Executioner.png', 'Executioner', 'Executioner专注于快速处决残血目标，技能附带流血效果，擅长收割战场。')">Executioner</button>
        <br><br>
        <button class="subclass-btn" onclick="updateSubclass('./assets/013.-Lancer.png', 'Lancer', 'Lancer使用长枪进行突进和挑击，拥有极强的机动性和破甲能力。')">Lancer</button>
        <br><br>
        <button class="subclass-btn" onclick="updateSubclass('./assets/014.-Titan.png', 'Titan', 'Titan是战场的重型坦克，拥有超高生命值和范围控制技能，能打乱敌方阵型。')">Titan</button>
    </p>
</div>

第二步：编写统一处理函数 #

删掉原来的changeImg和insertTxt，写一个updateSubclass函数，同时完成图片切换和描述更新：

function updateSubclass(imgUrl, className, classDesc) {
    // 切换主图片
    const mainImg = document.getElementById('main-img');
    mainImg.src = imgUrl;

    // 更新子类描述区域的内容
    const subclassDesc = document.getElementById('subclassDesc');
    subclassDesc.innerHTML = `
        <h3>${className}</h3>
        ${classDesc}
    `;
}

可选优化：用数据对象统一管理信息（更易维护） #

如果子类数量多或者后期需要频繁修改，把所有子类信息存在一个JS对象里，不用在HTML里写大量参数：

JavaScript部分：

// 集中存放所有子类的图片和描述
const subclassData = {
    Arbalest: {
        img: './assets/010.-Arbalest.png',
        desc: 'Arbalest是擅长远程精准打击的子类，依靠重型弩箭造成高额穿刺伤害。'
    },
    Dreadnought: {
        img: './assets/011.-Dreadnaught.png',
        desc: 'Dreadnought是重装防御型子类，身披厚甲，能承受大量伤害同时保护队友。'
    },
    Executioner: {
        img: './assets/012.-Executioner.png',
        desc: 'Executioner专注于快速处决残血目标，技能附带流血效果，擅长收割战场。'
    },
    Lancer: {
        img: './assets/013.-Lancer.png',
        desc: 'Lancer使用长枪进行突进和挑击，拥有极强的机动性和破甲能力。'
    },
    Titan: {
        img: './assets/014.-Titan.png',
        desc: 'Titan是战场的重型坦克，拥有超高生命值和范围控制技能，能打乱敌方阵型。'
    }
};

function updateSubclass(className) {
    // 从数据对象中获取对应子类的信息
    const data = subclassData[className];
    if (!data) return; // 避免传入不存在的子类导致报错

    // 切换图片
    const mainImg = document.getElementById('main-img');
    mainImg.src = data.img;

    // 更新描述
    const subclassDesc = document.getElementById('subclassDesc');
    subclassDesc.innerHTML = `
        <h3>${className}</h3>
        ${data.desc}
    `;
}

对应HTML按钮的点击事件简化为：

<button class="subclass-btn" onclick="updateSubclass('Arbalest')">Arbalest</button>
<button class="subclass-btn" onclick="updateSubclass('Dreadnought')">Dreadnought</button>
<!-- 其他按钮同理修改 -->

这样后期修改子类信息时，直接调整JS里的subclassData对象即可，不用改动HTML代码，维护效率更高。

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