英文:
Trouble with selecting node with querySelector using data attribute values
问题
我在我的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">
为什么会发生这种情况？我做错了什么？我应该如何选择我想要的节点？
英文:
I have 9 divs in my html like so:
<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>
I am trying to select one of them at a time using
document.querySelector(`.game-cell, [data-row="1"], [data-column="2"]`)
but on printing the output the node that get selected is the one with row and column values 1, no matter what values i specify:
<div class="game-cell" data-row="1" data-column="1">
Why is this happening? Am I doing something wrong? How can I select the node I want?
答案1
得分: 2
移除列：
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) {
myelement = cell;
}
});
英文:
Remove the columns:
document.querySelector('.game-cell[data-row="1"][data-column="2"]');
An alternative:
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;
}
});
答案2
得分: 1
你也可以使用选择器来匹配所有带有'game-cell'类的元素，然后可以使用纯JS基于它们的行和列属性来过滤结果：
const cells = document.querySelectorAll('.game-cell');
const targetCell = Array.from(cells).find(cell =>
cell.getAttribute('data-row') === '1' && cell.getAttribute('data-column') === '2'
);
英文:
You can also use a selector to match all elements with the 'game-cell' class so that you can then filter the results based on their row and column attributes using 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'
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论