时间戳

首页 > 解决方案 > 试图制作一个可点击的表格来更改无序列表中的值

javascript - 试图制作一个可点击的表格来更改无序列表中的值

问题描述

免责声明：这是我的第一篇文章，我对编码很陌生。出于纯粹的兴趣和决心，尽我最大的努力自学编码。请让我知道是否可以改进我的代码中的任何内容，或者我是否应该以不同的方式做事。温柔点哈哈

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

https://jsfiddle.net/9dwkhLyz/1/

标签： javascriptjquerycsshtml

解决方案

您可以尝试这样的事情，而无需任何 ID 和/或复杂代码。只需使用CSS 和伪元素index()来获取li您想要定位和调整的文本。

$('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>

推荐阅读