如何使用5个带图按钮通过不同组合展示对应32张预设图片

原有代码问题梳理 #

• 重复绑定点击事件：同时给按钮加了onclick属性和addEventListener点击监听，逻辑冲突
• 全局combinations变量从未实际更新，仅在combinationSelector里打印了拼接结果，没有赋值给变量
• 按钮点击顺序不固定会导致拼接的key无法匹配预定义的comb对象的键，比如先点b2再点b1得到的b2,b1和预定义的b1,b2不匹配
• 点击单个按钮切换状态后没有重新收集所有激活的按钮生成组合key，直接用了空的combinations变量，自然拿不到图片路径

正确实现方案 #

优化后HTML（去掉冗余的onclick属性，新增data-key存按钮标识） #

<div id="main">
    <img src="images/bg.jpg" alt="wrapper0" width="100%" height="100%" />
    <div class="btnimgs" id="btn1" data-key="b1"><img src="images/BTN_ETA.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn2" data-key="b2"><img src="images/BTN_MVD.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn3" data-key="b3"><img src="images/BTN_CKD.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn4" data-key="b4"><img src="images/BTN_Diabete.png" width="100%" height="100%" /></div>
    <div class="btnimgs" id="btn5" data-key="b5"><img src="images/BTN_IM.png" width="100%" height="100%" /></div>
    <div class="graphs" id="graph_1"><img id="graphImages" src="" width="100%" height="100%" style="display:none" /></div>
</div>

优化后JS逻辑 #

// 你的组合映射表保持原有配置即可
let comb = {
    b1: "PNG/Graphs-33.png",
    "b1,b2": "PNG/Graphs-34.png",
    b2: "PNG/Graphs-35.png",
    "b1,b2,b3": "PNG/Graphs-36.png",
    "b1,b3": "PNG/Graphs-37.png",
    // 剩余组合配置保持不变
}

let btns = document.getElementsByClassName("btnimgs");
let imageGraph = document.getElementById("graphImages");

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
        // 切换当前按钮激活状态
        this.classList.toggle("active");

        // 收集所有激活按钮的key，排序后拼接为统一格式的key，不受点击顺序影响
        let activeKeys = Array.from(btns)
            .filter(btn => btn.classList.contains("active"))
            .map(btn => btn.dataset.key)
            .sort()
            .join(',');

        // 匹配组合对应的图片
        if (comb[activeKeys]) {
            imageGraph.src = comb[activeKeys];
            imageGraph.style.display = "block";
        } else {
            // 无对应组合时隐藏图片，可根据业务需求调整
            imageGraph.style.display = "none";
        }
    });
}

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