如何为包含多张图片的div内被点击的单张图片应用切换功能

问题修正方案 #

原有代码核心错误点 #

• 开始按钮的点击回调逻辑错误：原回调接收的第一个参数是事件对象，并非图片数组索引，无法批量生成所有叠放图片
• DOM选择逻辑错误：querySelector('#cardsRear')返回的是单个DOM节点，不存在length属性，后续遍历绑定事件的逻辑完全不执行
• 选择器书写错误：querySelectorAll(":scope > Card_Rear")中Card_Rear是类名，且你需要选中的是容器内的图片子元素，不是容器本身
• 点击事件处理逻辑错误：原逻辑点击时遍历所有子元素切换类名，导致所有图片同时隐藏
• CSS选择器匹配错误：无法正确命中需要隐藏的图片元素

修正后代码 #

HTML

<div class="flex_container_start-button"> 
  <button type="button" class="btn btn-primary" id="StartButton">Click to Begin</button>
</div>
<div class="flex_container_board" id="Game_Board">
  <div class="Our-Card" id="ourCard">
    <div class="Card_Front" id=cardsFront></div>
    <div class="Card_Rear" id=cardsRear></div>
  </div>
</div>

CSS

/* 容器设置，实现内部图片叠放 */
#cardsRear {
  position: relative;
  width: 300px; /* 可自行调整为你的图片实际尺寸 */
  height: 400px;
}
/* 图片统一设置为绝对定位，全部叠在容器左上角 */
#cardsRear img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
/* 匹配被点击需要隐藏的图片 */
#cardsRear img.is-flipped {
  opacity: 0;
  pointer-events: none; /* 隐藏后不响应点击，避免误触透明的上层图片 */
}

JS

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }
  return array;
}
const images$Rear = [
  {name: "rear.1a",img: "rear.1a.png"},
  {name: "rear.1b",img: "rear.1b.png"},
  {name: "rear.2a",img: "rear.2a.png"},
  {name: "rear.2b",img: "rear.2b.png"},
]

const cardsRear = document.querySelector("#cardsRear");
const click4RearImage = document.querySelector("#StartButton");
click4RearImage.addEventListener("click", DisplayRearImage);

function DisplayRearImage() {
  // 清空容器，避免多次点击重复插入图片
  cardsRear.innerHTML = '';
  // 打乱图片数组后批量插入所有图片
  const shuffledImages = shuffle(images$Rear);
  shuffledImages.forEach(imgItem => {
    let rearImage = document.createElement('img');
    rearImage.src = `Images/${imgItem.img}`;
    rearImage.alt = imgItem.name;
    // 每张图片单独绑定点击事件，仅操作当前被点击的元素
    rearImage.addEventListener("click", function(e) {
      e.target.classList.add('is-flipped');
    })
    cardsRear.appendChild(rearImage);
  })
}

实现逻辑说明 #

• 点击开始按钮后将打乱顺序的所有图片插入容器，通过绝对定位实现叠放效果，后插入的图片默认在顶层
• 每张图片单独绑定点击事件，点击时仅给当前点击的图片添加透明类，实现只隐藏点击的顶层图片、露出下层图片的效果
• 隐藏后的图片取消点击响应，避免后续点击误触已经透明的上层图片

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