点击顺序决定位置的Div显示/隐藏功能调试求助

需求说明：

• 两个按钮（Button A、Button B）控制对应Div（Div A、Div B）的显示/隐藏
• Div占屏幕宽度50%，位置由点击顺序决定：首次点击的Div显示在右侧，第二次点击的Div显示在左侧
• 点击已显示的按钮需隐藏对应Div

原代码问题：

1. 元素位置调整逻辑混乱，导致第二次点击时会移动已有Div而非将新Div放在左侧
2. 类名移除方法错误（divs[index].classList.remove('class','show')写法不符合规范）
3. 显示/隐藏判断与位置调整逻辑耦合，导致执行顺序出错

修正后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Toggle with Position Control</title>
    <style>
        .columns{
            width:50%;
            height:100%;
        }
        body, html{
            height:100%;
            margin: 0;
            padding: 0;
        }
        .columns > div{
            position:relative;
            top:50%;
            transform: translateY(-50%);
            color:white;
            margin: 0;
        }
        .container{
            height:50%;
            display:flex;
        }
        button{
            margin: 10px;
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="buttons" data-target="divA">Button A</button>
    <button class="buttons" data-target="divB">Button B</button>

    <div class="container">
        <div class="columns" id="divA" style="background-color:green; text-align:center; display:none;">
            <div>div a</div>
        </div>
        <div class="columns" id="divB" style="background-color:red; text-align:center; display:none;">
            <div>div b</div>
        </div>
    </div>

<script>
    const buttons = document.querySelectorAll('.buttons');
    const container = document.querySelector('.container');
    // 跟踪已显示的Div，按点击顺序存储
    let displayedDivs = [];

    buttons.forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const targetDiv = document.getElementById(targetId);
            const divIndex = displayedDivs.indexOf(targetDiv);

            if (divIndex !== -1) {
                // 已显示，隐藏该Div并从列表移除
                targetDiv.style.display = 'none';
                displayedDivs.splice(divIndex, 1);
                // 剩余单个Div保持在右侧
                if (displayedDivs.length === 1) {
                    container.appendChild(displayedDivs[0]);
                }
                return;
            }

            // 未显示，添加到显示列表并显示
            displayedDivs.push(targetDiv);
            targetDiv.style.display = 'block';

            // 根据显示数量调整位置
            if (displayedDivs.length === 1) {
                // 第一个显示的Div放在右侧
                container.appendChild(targetDiv);
            } else if (displayedDivs.length === 2) {
                // 第二个显示的Div放在左侧，第一个保留在右侧
                container.insertBefore(targetDiv, displayedDivs[0]);
            }
        });
    });
</script>
</body>
</html>

关键修改说明：

• 新增displayedDivs数组，专门跟踪已显示Div的顺序，作为位置调整的核心依据
• 拆分显示/隐藏逻辑与位置调整逻辑，先处理状态再调整元素位置，避免逻辑冲突
• 改用ID直接获取目标Div，替代原代码的循环遍历，提升执行效率
• 优化CSS垂直居中逻辑（transform: translateY(-50%)），确保内容居中更可靠
• 给容器添加类名，简化DOM操作的选择器写法

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