Изменение нескольких изображений с помощью JavaScript

Question

Я пытаюсь настроить страницу с несколькими изображениями (карты из игры). По умолчанию карты начинаются с обратной стороны.Когда вы нажимаете на изображение, оно переворачивается, чтобы показать вам переднюю часть.

Вот одно из изображений, и как я изменяю это изображение:

<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>       

Есть идеи?

Answer 1

Вы должны хранить состояние изображения, исходное изображение и исходное изображение.тогда вы можете управлять им с помощью одной функции.

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) />