Question

基本上，我必须开发一个Tic-Tac-Toe游戏，这是HTML文件，我不能只重写一下，但是想法应该保持不变。


{% block content %}
    <nav class="navbar fixed-top navbar-light">
        <button id="retry-button" class="btn btn-success">Try again?</button>
        <a href="/" class="btn btn-outline-dark">Reset settings</a>
    </nav>
    <div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}">
        {% for row in range(row_num) %}
            <div>
                {% for col in range(col_num) %}
                    <div class="game-cell"
                         data-coordinate-x="{{ col }}"
                         data-coordinate-y="{{ row }}"></div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
{% endblock %}

如您所见，我有一个游戏单元类，默认包含9个元素。当我单击一个游戏单元时，我想返回data-x和data-y。我以前尝试过，但是如果单击它，则返回所有块，而不仅仅是我单击的块。我必须用Js编写。如果您能指出正确的方向，那对我来说已经绰绰有余。谢谢！

Answer 1

如果我理解正确，则需要访问游戏单元元素的数据属性。为此，您需要按某个ID或类选择元素。我对您的代码做了一些修改，以使其可以在stackoverflow的平台中运行。我添加了一个我称为“唯一”的ID，并且还在您的x和y数据属性中设置了一些值。请查看下面的代码，看看我如何设法获得这些数据属性。重要的是要注意，这不是访问它们的唯一方法。

var gamecell = document.getElementById('unique');
 
console.log(gamecell.dataset.coordinateX);
console.log(gamecell.dataset.coordinateY);

<nav class="navbar fixed-top navbar-light">
        <button id="retry-button" class="btn btn-success">Try again?</button>
        <a href="/" class="btn btn-outline-dark">Reset settings</a>
    </nav>
    <div id="game-board" class="mb-3" data-row-num="{{ row_num }}" data-col-num="{{ col_num }}" data-win-size="{{ win_size }}">
            <div>
                    <div class="game-cell" id="unique"
                         data-coordinate-x="172"
                         data-coordinate-y="273"></div>
            </div>
    </div>

也可以使用getAttribute方法获得这些值。

var elem = document.getElementById('unique');

var coordX = elem.getAttribute('data-coordinateX');
var coordY   = elem.getAttribute('data-coordinateY');

请查看此页面，它说明了数据属性的某些方面：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Answer 2

只需通过以下方式访问您单击的游戏单元（它将找到单击的坐标X和坐标Y）

document.querySelectorAll('.game-cell').forEach((game) => {
   game.addEventListener('click',function(event){
   console.log(game.dataset.coordinateX);
   console.log(game.dataset.coordinateY);
  });
});

Answer 3

您必须按类名或ID（添加ID）获取元素就会得到这样的属性

let gameCell = document.getElementById('game-cell-id');// id for example
gameCell.getAttribute('data-coordinate-x')

从类的特定元素获取属性

3 个答案: