免责声明：这是我的第一篇文章，我对编码非常陌生。试着用最纯粹的兴趣和决心来教我自己的编码。如果我的代码中的任何内容可以改进或者我应该以不同的方式做事，请告诉我。温柔的哈哈
现在我正在开展一个小项目，开发人员帮我把基础知识搞得一团糟。他让我创建了一个3x3的桌子，当我点击一个正方形时它会变成黑色，当它再次点击时它会变回白色。
我的下一个目标是创建一个无序列表，其中每个方块的颜色都会被写出来，并随着方块的点击而改变。如：
R1C1为白色...... 点击 ...... R1C1为黑色。
我已经烧掉了很多灰质，似乎无法弄明白。我试过以很多不同的方式接近它无济于事。提前感谢您提供的任何帮助。
td {
background: white;
cursor: pointer;
padding 2px
}
td.black-cell {
background: black;
}
.hidden {
display: none;
}<html>
<head>
<title>My Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="game2css.css">
<style>
table {
width: 50%;
height: 50%;
}
td,
th {
border: 2px solid;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td onclick='myFunction()' id="top-left"> </td>
<td id="top-middle"></td>
<td id="top-right"></td>
</tr>
<tr>
<td id="middle-left"></td>
<td id="middle-middle"></td>
<td id="middle-right"></td>
</tr>
<tr>
<td id="bottom-left"></td>
<td id="bottom-middle"></td>
<td id="bottom-right"></td>
</tr>
</table>
<UL id="BWList">
<li id="r1c1">Row 1, Column 1 is white.</li>
<li id="r1c2">Row 1, Column 2 is white.</li>
<li id="r1c3">Row 1, Column 3 is white.</li>
<li id="r2c1">Row 2, Column 1 is white.</li>
<li id="r2c2">Row 2, Column 2 is white.</li>
<li id="r2c3">Row 2, Column 3 is white.</li>
<li id="r3c1">Row 3, Column 1 is white.</li>
<li id="r3c2">Row 3, Column 2 is white.</li>
<li id="r3c3">Row 3, Column 3 is white.</li>
</UL>
<script>
$(function() {
$('td').click(function() {
$(this).toggleClass("black-cell");
});
});
function myFunction() {
var textnode = document.createTextNode("Black")
var item =
document.getElementById("r1c1").childNodes[0];
item.replaceChild(textnode, item.childNodes[0]);
}
// I'm fairly positive this is the wrong approach but included it just to show one way that I
</script>
</body>
</html>
答案 0 :(得分：2)
您可以在不需要任何ID和/或复杂代码的情况下尝试这样的操作。只需使用index()获取您要定位的li，然后使用CSS和伪元素调整文本。
$('table td').click(function() {
$(this).toggleClass("black-cell");
/*Get the index of the td within the tr +
Get the index of the parent tr within the table*/
var n = $(this).index() + $(this).parent().index() * 3;
$('ul#BWList li').eq(n).toggleClass("selected");
});table {
width: 50%;
}
td{
border: 2px solid;
padding: 10px;
background: white;
cursor: pointer;
padding 2px
}
td.black-cell {
background: black;
}
li:after {
content: " white."
}
li.selected:after {
content: " black."
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<ul id="BWList">
<li>Row 1, Column 1 is</li>
<li>Row 1, Column 2 is</li>
<li>Row 1, Column 3 is</li>
<li>Row 2, Column 1 is</li>
<li>Row 2, Column 2 is</li>
<li>Row 2, Column 3 is</li>
<li>Row 3, Column 1 is</li>
<li>Row 3, Column 2 is</li>
<li>Row 3, Column 3 is</li>
</ul>
答案 1 :(得分：2)
这里只是一个快速而肮脏的解决方案：我们的想法是为单元格及其相应的描述指定相同的id和class名称。然后，您可以使用以下代码获取与Cell的id具有相同类名的所有跨度。
$("." + $(this).attr('id')) //prepend a ".' to the ID
就像用“.r1c1”替换“＃r1c1”等，所以选择了跨度。然后你可以应用CSS类切换。
您还可以使用jQuery构建表和列表，以便代码更清晰。
$(function() {
$('td').click(function() {
// Toggle cell style
$(this).toggleClass("black-cell");
$("." + $(this).attr('id')).each(function() {
// toggle visibility of "black" and "white":
$(this).toggleClass('hidden');
});
});
});table {
width: 50%;
height: 50%;
}
td,
th {
border: 2px solid;
padding: 10px;
}
td {
background: white;
cursor: pointer;
padding 2px
}
td.black-cell {
background: black;
}
/* Hide the word "black" on load. */
.hidden {
display: none;
}<html>
<head>
<title>My Game</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="game2css.css">
</head>
<body>
<table>
<tr>
<td id="r1c1"> </td>
<td id="r1c2"></td>
<td id="r1c3"></td>
</tr>
<tr>
<td id="r2c1"></td>
<td id="r2c2"></td>
<td id="r2c3"></td>
</tr>
<tr>
<td id="r3c1"></td>
<td id="r3c2"></td>
<td id="r3c3"></td>
</tr>
</table>
<UL id="BWList">
<li>Row 1, Column 1 is <span class="r1c1">white</span><span class="r1c1 hidden">black</span>.</li>
<li>Row 1, Column 2 is <span class="r1c2">white</span><span class="r1c2 hidden">black</span>.</li>
<li>Row 1, Column 3 is <span class="r1c3">white</span><span class="r1c3 hidden">black</span>.</li>
<li>Row 2, Column 1 is <span class="r2c1">white</span><span class="r2c1 hidden">black</span>.</li>
<li>Row 2, Column 2 is <span class="r2c2">white</span><span class="r2c2 hidden">black</span>.</li>
<li>Row 2, Column 3 is <span class="r2c3">white</span><span class="r2c3 hidden">black</span>.</li>
<li>Row 3, Column 1 is <span class="r3c1">white</span><span class="r3c1 hidden">black</span>.</li>
<li>Row 3, Column 2 is <span class="r3c2">white</span><span class="r3c2 hidden">black</span>.</li>
<li>Row 3, Column 3 is <span class="r3c3">white</span><span class="r3c3 hidden">black</span>.</li>
</UL>
</body>
</html>