如何編寫我的jQuery讓我可以根據需要多次交換每個圖像？

Question

我在寫jQuery代碼來解決一個難題。 3x3表在每個單元格中都有一個圖像（8個圖像和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"); 

成爲本

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