我是 JavaScript 的初学者，想将其应用于我正在制作的井字游戏网站。我使用 HTML 表格制作了电路板。我想做到这一点，首先，董事会是明确的。然后，当您单击一个单元格时，会出现一个“x”的图片。单击一个单元格两次时，会出现一个“o”的图片。
这是我制作的表格的 HTML 和 CSS。
h1 {
text-align: center;
color: #003b4d;
font-family: verdana, sans-serif;
}
p {
text-align: center;
font-style: italic;
font-family: verdana, sans-serif;
font-size: 12px;
}
table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 50px;
height: 50px;
}<head>
<title>SUPERTAC</title>
</head>
<body>
<div id="title">
<h1>
Strategic Tic-Tac-Toe
</h1>
</div>
<div id="lorem-ipsum">
<p>
Lorem ipsum dolor sit amet, urna interdum nibh sit volutpat, euismod iaculis arcu eros orci, ut lobortis risus urna, eros scelerisque dolor pellentesque dapibus fames, posuere erat quam mi curabitur.
</p>
</div>
<div class="grid">
<!---turn pictures into buttons--->
<table class="strategic">
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="directions">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>如果有一种方法可以仅使用 CSS 和 HTML 来完成，那会更好，因为我刚刚学习如何使用 JavaScript。谢谢。
最佳答案
$(function(){
$(".icon").click(function(e){
e.preventDefault();
var icon = $(this).find("i");
if(icon.is(":visible")){
if(icon.hasClass('fa-close')){
icon.toggleClass('fa-circle-o');
}
else{
icon.toggleClass("fa-close");
}
}else{
icon.show();
}
});
});.icon{
text-decoration: none;
color: #000;
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
padding: .6em .7em;
}
.icon i{
display: none;
}
<!-- begin snippet: js hide: false console: true babel: false -->关于javascript - 在 javascript 上按下时图像切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43710368/