javascript 使用数据属性值通过querySelector选择节点时出现问题

ddrv8njm 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(188)

我在我的html中有9个div，如下所示：

<div class="game-cell" data-row="1" data-column="1"></div>
    <div class="game-cell" data-row="1" data-column="2"></div>
    <div class="game-cell" data-row="1" data-column="3"></div>
    <div class="game-cell" data-row="2" data-column="1"></div>
    <div class="game-cell" data-row="2" data-column="2"></div>
    <div class="game-cell" data-row="2" data-column="3"></div>
    <div class="game-cell" data-row="3" data-column="1"></div>
    <div class="game-cell" data-row="3" data-column="2"></div>
    <div class="game-cell" data-row="3" data-column="3"></div>

我尝试使用以下命令一次选择其中一个

document.querySelector(`.game-cell, [data-row="1"], [data-column="2"]`)

但是在打印输出时，被选中的节点是行和列值为1的节点，无论我指定什么值：

<div class="game-cell" data-row="1" data-column="1">

为什么会发生这种情况？我做错了什么吗？我怎么才能选择我想要的节点？

JavaScript

来源：https://stackoverflow.com/questions/75578454/trouble-with-selecting-node-with-queryselector-using-data-attribute-values

2条答案

按热度按时间

5n0oy7gb1#

删除列：

document.querySelector('.game-cell[data-row="1"][data-column="2"]');

另一种选择：

let myelement;
document.querySelectorAll('.game-cell').forEach(cell => () { 
  myrow = cell.dataset.row;
  mycolumn = cell.dataset.column;
  if (myrow == x && mycolumn == y) { //you specify 'x' and 'y'
    myelement = cell;
  }
});

赞(0）回复(0）举报 2023-02-28

gr8qqesn2#

您还可以使用一个选择器来匹配所有带有'game-cell'类的元素，这样您就可以使用pure js基于它们的行和列属性过滤结果：

const cells = document.querySelectorAll('.game-cell');
const targetCell = Array.from(cells).find(cell => 
  cell.getAttribute('data-row') === '1' && cell.getAttribute('data-column') === '2'
);

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 使用数据属性值通过querySelector选择节点时出现问题

2条答案

相关问题

热门标签

最新问答