Как обменять изображения в jQuery

Question

У меня есть задание создать головоломку с раздвижными изображениями, в которой вы можете щелкнуть по каждому изображению (которое является частью изображения ниндзя) и альтернативному изображению (части изображения кошки) появляются на его месте. Это своего рода игровой автомат для соответствия двум изображениям. Мы должны использовать пользовательские атрибуты (data-alt-src в коде) и не использовать переменные JavaScript или любой CSS. Я просто не понимаю, как использовать пользовательские атрибуты для обмена изображениями. В задании говорится, что это займет не более 2 часов, и это далеко не так. Я пытаюсь использовать сценарии jQuery для использования .attr, но безрезультатно.

<script> 
    $(document).ready(function(){ 
     $('img').click(function(){ 
      $(this).slideToggle('data-alt-src'); 
      $(this).slideToggle(); 
     }) 

    }) 
</script> 

<img src='ninja0.png' data-alt-src='cat0.png' /> 
<br/> 
<img src='ninja1.png' data-alt-src='cat1.png' /> 
<br/> 
<img src='ninja2.png' data-alt-src='cat2.png' /> 
<br/> 
<img src='ninja3.png' data-alt-src='cat3.png' /> 
<br/> 
<img src='ninja4.png' data-alt-src='cat4.png' /> 

Answer 1

попробовать что-то вроде этого,

<script> 
$(document).ready(function() { 
    $('img').click(function(){ 
       if($(this).attr('src')===$(this).data('src1')){ 
        $(this).attr('src',$(this).data('src2')); 
       } 
       else{ 
        $(this).attr('src',$(this).data('src1')); 
       } 
     }); 

}); 

</script> 

<img src='ninja0.png'' data-src1='ninja0.png' data-src2='cat0.png'/> 
<img src='ninja1.png'' data-src1='ninja1.png' data-src2='cat1.png'/> 
<img src='ninja2.png'' data-src1='ninja2.png' data-src2='cat2.png'/> 
<img src='ninja3.png'' data-src1='ninja3.png' data-src2='cat3.png'/>