[基本上,我必须开发一个井字游戏,这是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编写。如果您能指出正确的方向,那对我来说绰绰有余。谢谢!
如果我理解正确,则需要访问游戏单元元素的数据属性。为此,您需要通过某个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
您必须按类名或ID(添加ID)获取元素那么您可以像这样获得其属性
let gameCell = document.getElementById('game-cell');
gameCell.getAttribute('data-coordinate-x')