使用 javascript 更改多个图像答案

【问题标题】：Changing multiple images with javascript使用 javascript 更改多个图像
【发布时间】：2018-10-15 23:00:31
【问题描述】：

我正在尝试设置一个包含多张图片的页面（游戏中的卡片）默认情况下，卡片开始显示背面。当您单击图像时，它会翻转以显示正面。

这是其中一张图片以及我如何更改该图片：

<img src="TechBack.png" id="Tech" onclick=diffImageTech(this) />

<script>    
function diffImageTech(img) 
{
   if(img.src.match(/TechBack/)) img.src = "TechFront.png";
   else img.src = "TechBack.png";
}       
</script>

我还想发生的是，如果卡片 A 已经翻转到正面图像，那么当您单击卡片 B 时，卡片 A 将翻转到背面，而卡片 B 将翻转到正面图像。

这是我试图通过谷歌搜索完成的工作：

<img src="CelebBack.png" id="CelebBack" onclick=diffImageCelebs(this) />
<img src="TechBack.png" id="TechBack" onclick=diffImageTech(this) />


<script>    
function diffImageCelebs(element) 
{
var a = element.getElementById("CelebBack").item(0);
var b = element.getElementById("TechBack").item(0);

var aa = a.getAttribute("src");
var bb = b.getAttribute("src");

if bb = "TechFront.png" 

{   bb = "TechBack.png";    }

else    {   "TechBack.png"; }

b.setAttribute("src", bb);

if aa = "CelebBack.png";
{ aa = "CelebFront.png"; }
   else {  "CelebBack.png";  }

a.setAttribute("src", aa);

   }        
</script>

有什么想法吗？

【问题讨论】：

标签： javascript html image onclick

【解决方案1】：

您应该存储图像的状态、后图像 src 和前图像 src。然后你可以用一个函数来操作它。

function diffImageTech(img) 
{
   if(img.getAttribute('data-display')=='front'){
      img.setAttribute('data-display', 'back');
      img.setAttribute('src', img.getAttribute('data-back'));
   }
   else {
    img.setAttribute('data-display','front');
      img.setAttribute('src', img.getAttribute('data-front'));
   }
}

<img src="https://dummyimage.com/400x200/000/cfd0d6&text=CelebBack" data-back="https://dummyimage.com/400x200/000/cfd0d6&text=CelebBack" data-front="https://dummyimage.com/400x200/000/cfd0d6&text=CelebFront" id="CelebBack"  onclick=diffImageTech(this) />
<img src="https://dummyimage.com/400x200/000/cfd0d6&text=TechBack"   data-back="https://dummyimage.com/400x200/000/cfd0d6&text=TechBack"  data-front="https://dummyimage.com/400x200/000/cfd0d6&text=TechFront" id="TechBack" onclick=diffImageTech(this) />

【讨论】：