时间戳

首页 > 解决方案 > 从类的特定元素获取属性

javascript - 从类的特定元素获取属性

问题描述

基本上我必须开发一个井字游戏，这是我无法重写的 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-coordinate-x 和 data-coordinate-y。我之前有过尝试，但如果我点击它会返回所有的块，而不仅仅是我点击的那个。我必须用Js来写。如果你能指出我正确的方向，那对我来说已经足够了。谢谢！

标签： javascripthtmldom

解决方案

如果我理解正确，您需要访问游戏单元元素的数据属性。为此，您需要通过某个 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

推荐阅读