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", " ");