Web开发新手求助：按钮点击按序显示国旗及重复显示问题

嘿，我仔细看了你的代码和遇到的问题，咱们一步步来搞定这两个需求：

问题1：按点击先后顺序显示图片 #

你当前的代码只是给对应国旗元素添加show类，但这些元素的位置是写死在原有布局里的，所以不管点击顺序如何，它们只会在自己原本的位置显示，不会重新排序。要实现按点击顺序展示，我们需要一个专门的显示容器，每次点击按钮时，把对应的国旗元素（或者它的克隆）添加到这个容器里，容器内的元素顺序自然就是你的点击顺序啦。

问题2：让图片可以重复显示多次 #

现在的代码里，每个国旗元素只有一个实例，一旦显示后就没法再次触发“显示动作”（因为它已经是可见状态了）。要支持重复显示，我们可以每次点击时克隆原国旗元素，把克隆后的新元素添加到显示容器里，这样每次点击都会生成一个新的实例，自然就能重复展示同一个国旗多次了。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>国旗展示器</title>
    <style type="text/css">
        .hide { display: none; }
        #display-area {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 100px;
        }
        #display-area img {
            margin: 0 10px 10px 0;
            max-height: 80px;
        }
    </style>
</head>
<body>
    <!-- 按钮区域 -->
    <input type="button" onclick="showImg(1)" value="A" >
    <input type="button" onclick="showImg(2)" value="B">
    <input type="button" onclick="showImg(3)" value= "C">
    <input type="button" onclick = "showImg(4)" value= "D">
    <input type="button" onclick = "showImg(5)" value= "E">
    <input type="button" onclick = "showImg(6)" value= "ANS">

    <!-- 专门的显示容器：按点击顺序存放国旗 -->
    <div id="display-area"></div>

    <!-- 隐藏的原始国旗库：仅作为素材克隆，不直接显示 -->
    <div class="flag-library hide">
        <img id="flag1" src="flag1.jpeg" title="1">
        <img id="flag2" src="flag2.jpeg" title="2"> <!-- 修正了你原代码里的src拼写错误：lag2 → flag2 -->
        <img id="flag3" src="flag3.jpeg" title="3">
        <img id="flag4" src="flag4.jpeg" title="4">
        <img id="flag5" src="flag5.jpeg" title="5">
        <img id="flag6" src="flag6.jpeg" title="ANS">
    </div>

    <script>
        function showImg(id) {
            // 获取原始国旗元素
            const originalFlag = document.getElementById(`flag${id}`);
            if (!originalFlag) return;

            // 克隆原始元素（true表示连同所有属性一起克隆）
            const clonedFlag = originalFlag.cloneNode(true);
            // 给克隆元素设置唯一id，避免页面内id重复
            clonedFlag.id = `flag${id}-${Date.now()}`;

            // 将克隆的国旗添加到显示容器末尾
            const displayArea = document.getElementById('display-area');
            displayArea.appendChild(clonedFlag);
        }
    </script>
</body>
</html>

关键修改点说明 #

• 新增专属显示容器：#display-area用来专门存放按点击顺序生成的国旗，彻底摆脱原有布局的限制。
• 隐藏国旗素材库：把所有原始国旗放到.flag-library里并隐藏，只作为克隆的“素材源”，不会直接出现在页面上。
• 克隆元素实现重复显示：每次点击都克隆原始国旗生成新实例，确保同一个按钮可以多次点击，每次都生成新的国旗元素。
• 修复小错误：你原代码里flag2的src写成了lag2.jpeg，我已经帮你修正了。

如果你的需求是“重复切换同一个国旗的显示/隐藏”（而不是生成多个实例），可以改用类切换的方式，代码调整如下：

function showImg(id) {
    const flag = document.getElementById(`flag${id}`);
    if (!flag) return;
    // 切换hide类：有则移除，无则添加
    flag.classList.toggle('hide');
}

但这种方式无法解决按点击顺序排列的问题，所以更推荐第一种克隆元素的方案来同时满足两个需求。

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