求助：实现可点击3x3表格同步更新无序列表颜色状态

嘿，很高兴看到你在自学编程的路上迈出这么扎实的一步！你的基础功能（点击单元格切换黑白）已经做得很好了，现在咱们来搞定列表同步更新的问题，其实思路很清晰，咱们一步步来调整～

先梳理下现有代码的小问题 #

• 你给第一个td加了onclick='myFunction()'，但后面又用jQuery给所有td绑定了点击事件，其实这个单独的onclick可以删掉，避免逻辑冲突
• myFunction只能修改第一个列表项的文本，而且只能改成黑色，没有处理“再次点击变回白色”的切换逻辑，也没关联其他单元格

修改后的完整代码 #

HTML部分

<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 data-list-id="r1c1" id="top-left"></td>
      <td data-list-id="r1c2" id="top-middle"></td>
      <td data-list-id="r1c3" id="top-right"></td>
    </tr>
    <tr>
      <td data-list-id="r2c1" id="middle-left"></td>
      <td data-list-id="r2c2" id="middle-middle"></td>
      <td data-list-id="r2c3" id="middle-right"></td>
    </tr>
    <tr>
      <td data-list-id="r3c1" id="bottom-left"></td>
      <td data-list-id="r3c2" id="bottom-middle"></td>
      <td data-list-id="r3c3" 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");
        // 获取当前单元格对应的列表项ID
        const listItemId = $(this).data('list-id');
        // 判断当前单元格的颜色状态
        const isBlack = $(this).hasClass('black-cell');
        // 更新对应的列表项文本
        const statusText = isBlack ? 'black' : 'white';
        $('#' + listItemId).text(`Row ${listItemId[1]}, Column ${listItemId[3]} is ${statusText}.`);
      });
    });
  </script>
</body>
</html>

CSS部分

td { background: white; cursor: pointer; padding: 2px; }
td.black-cell { background: black; }
.hidden { display: none; }

关键逻辑解释 #

1. 用data-list-id建立关联：给每个td添加自定义属性data-list-id，值对应列表里的li的ID，这样点击任意单元格时，能快速找到对应的列表项，不用写一堆判断每个单元格ID的代码
2. 统一处理所有单元格的点击事件：通过jQuery的$('td').click绑定所有单元格的点击逻辑，一次绑定搞定全部
3. 状态判断与文本更新：切换类之后，用hasClass判断当前是否是黑色，然后动态生成对应的状态文本，更新到列表项里

这样调整后，点击任意单元格，不仅单元格颜色会切换，对应的列表项文本也会同步更新啦～如果还有其他疑问，随时问！

内容的提问来源于stack exchange，提问作者AutoEnigmatic