如何实现4张图书图片点击切换正反面的双向切换功能？

原代码存在的问题 #

• HTML中多个<img>标签重复使用id="pbook"，ID在文档中必须唯一，属于无效写法
• JS函数仅实现了切换到背面图片的单向逻辑，未判断当前图片状态以实现点击还原
• changeImageFour函数存在语法错误：使用赋值运算符=而非比较运算符==，且if语句后多了分号导致逻辑块为空

推荐解决方案：统一函数+Data属性（简洁易维护） #

通过给图片标签添加data-back属性存储背面图片地址，用单个函数处理所有图片的切换逻辑，同时修复ID重复问题。

修改后的HTML代码

<div class="col-lg-3 text-center">
  <img id="pbook1" onclick="toggleBookImage(this)" class="imagebooks" src="images/pink1.jpg" data-back="images/pink1back.jpg" alt="">
  <a href="#"> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="pbook2" onclick="toggleBookImage(this)" class="imagebooks" src="images/pink2.jpg" data-back="images/pink2back.jpg" alt="">
  <a href="#"> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="pbook3" onclick="toggleBookImage(this)" class="imagebooks" src="images/pink3.jpg" data-back="images/pink3back.jpg" alt="">
  <a href="#"> 
    <button class="bookbutton">Buy Now</button>
  </a>
</div>

<div class="col-lg-3 text-center">
  <img id="pbook4" onclick="toggleBookImage(this)" class="imagebooks text-center" src="images/pink4.jpg" data-back="images/pink4back.jpg" alt="">
  <a href="#"> 
  <button class="bookbutton">But Now</button>
  </a>
</div>

对应的JS代码

function toggleBookImage(image) {
  const frontSrc = image.getAttribute('src');
  const backSrc = image.getAttribute('data-back');
  
  // 判断当前显示的是正面还是背面，切换图片地址
  if (image.src.includes(backSrc)) {
    image.src = frontSrc;
  } else {
    image.src = backSrc;
  }
}

备选方案：修改原有独立函数 #

如果不想调整结构，可直接修改每个函数的逻辑，添加状态判断：

修改后的JS代码

function changeImageOne(image) {
  const front = 'images/pink1.jpg';
  const back = 'images/pink1back.jpg';
  image.src = image.src.includes(back) ? front : back;
}

function changeImageTwo(image) {
  const front = 'images/pink2.jpg';
  const back = 'images/pink2back.jpg';
  image.src = image.src.includes(back) ? front : back;
}

function changeImageThree(image) {
  const front = 'images/pink3.jpg';
  const back = 'images/pink3back.jpg';
  image.src = image.src.includes(back) ? front : back;
}

function changeImageFour(image) {
  const front = 'images/pink4.jpg';
  const back = 'images/pink4back.jpg';
  image.src = image.src.includes(back) ? front : back;
}

同时需修改HTML中的ID为唯一值

将重复的id="pbook"分别改为id="pbook1"、id="pbook2"、id="pbook3"、id="pbook4"，符合HTML规范。

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