jQueryを書いて、何回でも各画像を入れ替えることができますか？

Question

パズルを解くためにjQueryコードを書いています。 3×3の表には各セルに画像（8枚の画像と1枚の白い正方形の画像）がありますが、クリックした画像が白/空白の正方形に隣接している場合にのみ切り替えることができます。私のコードは、隣接する画像だけを動かすことができるようになっています。しかし、私は各画像を1回だけ交換することができます。私はそれを書いて、私が望むように各画像を何度も入れ替えることができますか？

$(document).ready(function(event) { 
    $("img").click(function(){ 
     var blankSquare = $("#blank"); 
     var blankIndex = $("img").index(blankSquare); 
     //alert(blankIndex); //this updates as square moves 
     var imageSquare = $(this); 
     var imageIndex = $("img").index(this); //returns index of selected image 
     //alert(imageIndex); //will update as selected image changes 
     //swap image if it's index (position) is next adjacent to the white square  
     if(imageSquare !== blankSquare) { 
      if(imageIndex == 0 && blankIndex == 1) { //switch if image is at index 0 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 0 && blankIndex == 3) { //switch if image is at index 0 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 1 && blankIndex == 0) { //switch if image is at index 1 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 1 && blankIndex == 2) { //switch if image is at index 1 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 1 && blankIndex == 4) { //switch if image is at index 1 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
       imageClicked.data('clicked') == false; 
      } else if(imageIndex == 2 && blankIndex == 1) { //switch if image is at index 2 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 2 && blankIndex == 5) { //switch if image is at index 2 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 3 && blankIndex == 0) { //switch if image is at index 3 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 3 && blankIndex == 4) { //switch if image is at index 3 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 3 && blankIndex == 6) { //switch if image is at index 3 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 4 && blankIndex == 1) { //switch if image is at index 4 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 4 && blankIndex == 3) { //switch if image is at index 4 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 4 && blankIndex == 5) { //switch if image is at index 4 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 4 && blankIndex == 7) { //switch if image is at index 4 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 5 && blankIndex == 2) { //switch if image is at index 5 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 5 && blankIndex == 4) { //switch if image is at index 5 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 5 && blankIndex == 8) { //switch if image is at index 5 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 6 && blankIndex == 3) { //switch if image is at index 6 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.appendTo("td:empty"); 
      } else if(imageIndex == 6 && blankIndex == 7) { //switch if image is at index 6 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 7 && blankIndex == 4) { //switch if image is at index 7 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 7 && blankIndex == 6) { //switch if image is at index 7 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 7 && blankIndex == 8) { //switch if image is at index 7 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 8 && blankIndex == 5) { //switch if image is at index 8 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } else if(imageIndex == 8 && blankIndex == 7) { //switch if image is at index 8 
       imageSquare.replaceWith(blankSquare); 
       imageSquare.detach().appendTo("td:empty"); 
      } 
     }//end of !== if-statement 
    }); 
}); 

HTML

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Tile Game</title> 
    <script src=" https://code.jquery.com/jquery-3.2.0.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="puzzle2.js" type="text/javascript"></script> 
    </head> 
    <body> 
    <table> 
<tr> 
    <td><img src="SockeyOneRow3A.jpg" /></td> 
    <td><img src="SockeyOneRow2B.jpg" /></td> 
    <td><img src="SockeyOneRow3B.jpg" /></td> 
</tr> 
<tr> 
    <td><img src="SockeyOneRow2A.jpg" /></td> 
    <td><img id="blank" src="blank.jpg" /></td> 
    <td><img src="SockeyOneRow1B.jpg" /></td> 
</tr> 
<tr> 
    <td><img src="SockeyOneRow1A.jpg" /></td> 
    <td><img src="SockeyOneRow2C.jpg" /></td> 
    <td><img src="SockeyOneRow3C.jpg" /></td> 
</tr> 
</table> 
</body> 
</html> 

Answer 1

私は自分のポストかどうかを答える必要がある場合は必ず、私はそれを考え出したわけではありません。

私はattr（）メソッドを使用して切り替えました。だから私は自分の空白の画像と私のクリックした画像のソースを見つけ出し、それらを別々の変数に保存しました。

var blankSource = $(blankSquare).attr("src"); 
var imageSource = $(imageSquare).attr("src"); 

次に、選択したイメージのソースをブランクイメージのソースに切り替えました。ブランクイメージ変数（blankSquare）はそのIDで作成されたので、ブランクイメージでもそれを転送しなければなりませんでした。そのコードは次のとおりです。

imageSquare.attr("src", blankSource); //this sets the blank image's source to the clicked image's source 
imageSquare.attr("id", "blank"); //this sets an the ID value of "blank" the clicked image 
blankSquare.attr("src", imageSource); //this sets the clicked image's source to the blank image's source 
blankSquare.attr("id", " "); //this removes the id from the blank image 

このコードブロックは、私のif-elseステートメントの間に現れた私の元のステートメントを置き換えました。 （そこ隣接する制限を設定するためのより良い方法は、おそらくですが、これは動作します。）

だから、この

imageSquare.replaceWith(blankSquare); 
imageSquare.detach().appendTo("td:empty"); 

はフィドルにもHTMLを投稿してください、そして可能ならば、この

imageSquare.attr("src", blankSource); 
imageSquare.attr("id", "blank"); 
blankSquare.attr("src", imageSource); 
blankSquare.attr("id", " ");