Question

我正在尝试构建一个井字游戏，用户首先点击他想要的玩家，然后点击他想要玩的棋盘上的方块。我遇到的问题是更改用户点击的方块的背景。因为我不知道用户会点击哪个方格，所以我无法弄清楚如何更改背景的样式，因为方形的ID /类是未知的。

我不能说：

document.getElementById("randomId").style.backg    round

因为我不知道用户会点击哪个方格。这是代码：

<!DOCTYPE html>
<html>
<head>
    <title>Tic-Tac-Toe Game</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <style type="text/css">
        #buttons{
            margin-top: 50px;
        }
        #x{
            margin-left: 10px;
        }
        #table{
            margin-top: 15px;
            background: gray;
            table-layout: fixed;
            width: auto;
            width: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
<div class="container" id="buttons">
    <h2 id="h2">Choose your team!</h2>
    <button onclick="myFunctions()" type="button" class="btn btn-default"><span
            style="font-weight: bold; font-size: 110%;">O</span></button>
    <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
    </button>

    <table id="table" class="table table-bordered">
        <tbody>
        <tr>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
        </tr>
        <tr>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
        </tr>
        <tr>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
            <td onclick="myFunction()"></td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var master = false;
    var servant = false;

    function myFunctions(){
        master = true;

    }
    function myFunction() {
        if (master == true) {

        }
    }
</script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

好吧，您可以这样做，在调用函数时添加参数，在这种情况下，this关键字将指向html元素（td）。

通过添加css类，您可以相对轻松地处理更改并检查之前是否未单击。

var master = true;

// clickedElement = your dom element you want to update
function myFunction(clickedElement) {
  // if a dom element was given and it doesn't have a className yet
  if (clickedElement && !clickedElement.className) {
    // set a class on the element
    clickedElement.className = master ? 'master' : 'servant';

    // change the player (if it's not a master it's a servant)
    master = !master;
  }
}

#buttons {
  margin-top: 50px;
}
#x {
  margin-left: 10px;
}
#table {
  margin-top: 15px;
  background: gray;
  table-layout: fixed;
  width: auto;
  width: 250px;
  height: 250px;
}
.master {
  background-color: green;
}
.servant {
  background-color: red;
}

<div class="container" id="buttons">
  <h2 id="h2">Choose your team!</h2>
  <button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span>
  </button>
  <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
  </button>

  <table id="table" class="table table-bordered">
    <tbody>
      <tr>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
      </tr>
      <tr>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
      </tr>
      <tr>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
        <td onclick="myFunction(this)"></td>
      </tr>
    </tbody>
  </table>


</div>

当然没有理由只在DOM上存储这些信息，你仍然需要评估是否有3个相同颜色的单元格。您可能希望选择保留一个数据结构，以检查单击了哪个块以及单击了哪个块，以及对于刚刚单击的人来说，对角线，垂直或水平3对齐。

如果您想要更多灵感，可以查看jsfiddle

在JavaScript中更改未知元素的样式

1 个答案: