javascript - 在 jquery 中添加图像

Question

我正在尝试制作国际象棋游戏，并且真的刚刚开始学习 jquery。我制作了一个 8*8 的棋盘，我想在右下角的起始位置添加一个车，我该怎么做？ 我尝试为图像制作一个 css 并添加为 id。

HTML 棋

<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

这个设置/解决方案有很多问题，但我会回答你的问题。

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

如果要将 src 添加到 img 标签，则可以删除 #whiterook 元素的背景图像样式。 img 元素是所谓的替换内联元素，它不支持 background-image 属性。