如何用JS实现点击按钮同时切换imageBox1与imageBox2中的两张图片

完全可以实现，以下是可直接运行的完整实现，首先修正你原有HTML的一处笔误：.imageBox2的class属性缺少闭合引号，后续方案基于修正后的结构开发。

1. 完整代码实现 #

1.1 HTML（修正后） #

<div class = "Button">
    <button type="button">hello</button>
    <button type="button">world</button>
</div>

<div class = "imageBox1">
    <img src="image1-1.jpg" alt="图1-1">
    <img src="image1-2.jpg" alt="图1-2">
</div>

<div class = "imageBox2">
    <img src="image2-1.jpg" alt="图2-1">
    <img src="image2-2.jpg" alt="图2-2">
</div>

1.2 CSS（控制图片显隐逻辑） #

/* 默认隐藏所有图片 */
.imageBox1 img, .imageBox2 img {
    display: none;
}
/* 激活状态的图片可见 */
.imageBox1 img.active, .imageBox2 img.active {
    display: block;
}

1.3 JS（核心切换逻辑） #

// 获取所有DOM元素
const buttons = document.querySelectorAll('.Button button');
const imgsBox1 = document.querySelectorAll('.imageBox1 img');
const imgsBox2 = document.querySelectorAll('.imageBox2 img');

// 初始化默认显示第一张对应图片
imgsBox1[0].classList.add('active');
imgsBox2[0].classList.add('active');

// 给所有按钮绑定点击事件
buttons.forEach((btn, index) => {
    btn.addEventListener('click', () => {
        // 清空所有图片的激活状态
        imgsBox1.forEach(img => img.classList.remove('active'));
        imgsBox2.forEach(img => img.classList.remove('active'));
        // 给和按钮索引匹配的两张图片添加激活状态，实现同步切换
        imgsBox1[index].classList.add('active');
        imgsBox2[index].classList.add('active');
    })
})

实现逻辑说明 #

• 按钮和图片按下标一一对应：第一个按钮对应两个容器内的第一张图片，第二个按钮对应第二张图片，后续如果要扩展更多切换项，只要保持按钮数量和每个图片容器内的图片数量一致即可直接复用
• 你也可以根据业务需求修改CSS的显隐规则，比如换成透明度切换实现淡入淡出的过渡效果

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