javascript-尝试制作可点击的表格,以更改无序列表中的值

免责声明：这是我的第一篇文章,我对编码非常陌生.出于绝对的兴趣和决心,尝试最胆小的方法来教自己编码.请让我知道代码中的任何内容是否可以改进,或者我是否应该做不同的事情.大声笑

现在,我正在做一个开发人员给我的小项目,以帮助我掌握基础知识.他让我创建了一个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/

解决方法:

您可以尝试这样的操作,而无需任何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>

相关推荐