Hinzufügen eines Bildes in Jquery

Question

Ich versuche, ein Schachspiel zu machen und fängt gerade an, Jquery zu lernen. Ich habe ein 8 * 8 Board gemacht und ich versuche einen Turm zu seiner Startposition unten rechts hinzuzufügen, wie kann ich das machen? Ich habe versucht, ein CSS für das Bild und fügen Sie als ID.

HTML Schach

<h1> Game Board </h1> 
<table id="gameBoard"> 
<tbody></tbody> 
</table> 
<img id="whiterook"> 
</img> 
<footer> 
This is an example of creating a chess Game. 
</footer> 
<script src="js/jquery-3.0.0.min.js"></script> 
<script src="js/chess.js"></script></body> 
</html> 

JS

$(function() { 

var row = new Array(9).join('<td></td>'); 
var body = new Array(9).join('<tr>' + row + '</tr>'); 

}); 

CSS

#gameBoard { 
border-collapse: collapse; 
border: solid 1px black; 
} 
#gameBoard td { 
    width: 50px; 
    height: 50px; 
} 
#gameBoard tbody tr:nth-child(2n+1) td:nth-child(2n) { 
    background-color: black; 
} 
#gameBoard tbody tr:nth-child(2n+2) td:nth-child(2n +1) { 
    background-color: black; 
} 
#whiterook{ 
background-image: url(../images/Chess_tile_rl.png); 
width: 40px; 
height: 40px; 
top:300px; 
} 

Answer 1

Es gibt viele fragwürdige Dinge, die mit dieser Einrichtung/Lösung passieren, aber ich werde die Frage beantworten, die Sie hatten.

$('#whiterook').attr('src','/images/Chess_tile_rl.png'); 

Wenn Sie das src auf den img-Tag hinzufügen, dann können Sie das Hintergrund-Bild Styling des #whiterook Elements entfernen. Das Element img ist ein sogenanntes ersetztes Inline-Element, das die Eigenschaft background-image nicht unterstützt.

Answer 2

Doing ein Spiel mit CSS schwierig Art sein würde, empfehle ich Ihnen dringend html5 und Javascript zu verwenden, sind hier einige einfache Schritt für Schritt-Anleitungen für ein Schachspiel:

http://www.html5gamedevs.com/topic/11008-learning-to-write-a-javascript-chess-game/

https://geeksretreat.wordpress.com/2012/06/01/html-5-canvas-chess-board/

Hoffe es hilft!