Отказ от ответственности: Это мой первый пост, и я очень плохо знаком с кодированием.Стараюсь изо всех сил учить себя кодированию из чистого интереса и решимости.Пожалуйста, дайте мне знать, если что-то в моем коде может быть улучшено, или я должен делать вещи по-другому.Будьте осторожны, смеется
Сейчас я работаю над небольшим проектом, который разработчик дал мне, чтобы помочь мне разобраться в основах.Он заставил меня создать таблицу 3х3 и сделать так, чтобы при щелчке по квадрату он становился черным, а при повторном щелчке по нему - белым.
Моя следующая цель - создать неупорядоченный список, имеющий цветкаждого выписанного квадрата и изменяется при нажатии на квадраты.Например:
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>
https://jsfiddle.net/9dwkhLyz/1/