Wie schreibe ich meine jQuery, damit ich jedes Bild beliebig oft austauschen kann?

Question

Ich schreibe jQuery Code, um ein Puzzle zu lösen. Eine 3x3-Tabelle enthält in jeder Zelle ein Bild (8 Bilder und 1 weißes Quadrat), aber sie können nur wechseln, wenn das angeklickte Bild an ein weißes/leeres Quadrat angrenzt. Mein Code arbeitet so weit, dass nur benachbarte Bilder verschoben werden können. Allerdings kann ich jedes Bild nur einmal austauschen. Wie schreibe ich es, damit ich jedes Bild beliebig oft austauschen kann?

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

nicht sicher, ob ich meinen eigenen Beitrag antworten oder nicht, aber ich es herausgefunden.

Ich wechselte zur Verwendung der attr() -Methode. Also habe ich zuerst die Quellen meines leeren Bildes und meines angeklickten Bildes gefunden und in separaten Variablen gespeichert.

Ich wechselte dann die Quelle des ausgewählten Bildes mit der des leeren Bildes. Die leere Bildvariable (blankSquare) wurde mit ihrer ID erstellt, also musste ich diese auch mit dem leeren Bild übertragen. Hier ist der Code:

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 

Dieser Code-Block ersetzt meine ursprünglichen Anweisungen, die zwischen meinen If-else-Anweisungen angezeigt wurden. (Es gibt wahrscheinlich einen besseren Weg, um die benachbarten Beschränkungen festlegen zu können, aber das funktioniert.)

Also die

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

dies wurde

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