个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 23:17:52 24 4
gpt4 key购买 nike

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

现在我正在做一个开发人员给我的小元素，以帮助我掌握基础知识。他让我创建了一个 3x3 的表格，当我点击一个正方形时它会变成黑色，当再次点击它时它会变回白色。

我的下一个目标是制作一个无序列表，其中写出每个方 block 的颜色并随着方 block 被点击而变化。如:

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>

关于javascript - 试图制作一个可点击的表格来更改无序列表中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50519898/

24 4 0
文章推荐： html - 将 HTML 页面转换为 PDF 时修复 PDF 辅助功能问题(注释缺少替代描述)
文章推荐： javascript - 如何 promise node.js net.connect(使用 bluebird)？
文章推荐： javascript - 如何让 EventEmitter 监听 Node.js 中的另一个 EventEmitter？
文章推荐： php - 在 Excel 中将 0 值格式化为 - 使用 PHPExcel
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com