使用 `querySelector` 选择节点时遇到问题，使用数据属性值。

huangapple
go评论93阅读模式
英文:

Trouble with selecting node with querySelector using data attribute values

问题

我在我的HTML中有9个类似以下的div：

  1.     <div class="game-cell" data-row="1" data-column="1"></div>
  2.     <div class="game-cell" data-row="1" data-column="2"></div>
  3.     <div class="game-cell" data-row="1" data-column="3"></div>
  4.     <div class="game-cell" data-row="2" data-column="1"></div>
  5.     <div class="game-cell" data-row="2" data-column="2"></div>
  6.     <div class="game-cell" data-row="2" data-column="3"></div>
  7.     <div class="game-cell" data-row="3" data-column="1"></div>
  8.     <div class="game-cell" data-row="3" data-column="2"></div>
  9.     <div class="game-cell" data-row="3" data-column="3"></div>

我试图使用以下代码选择其中一个：

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

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

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

为什么会发生这种情况？我做错了什么？我应该如何选择我想要的节点？

英文:

I have 9 divs in my html like so:

  1.     &lt;div class=&quot;game-cell&quot; data-row=&quot;1&quot; data-column=&quot;1&quot;&gt;&lt;/div&gt;
  2.     &lt;div class=&quot;game-cell&quot; data-row=&quot;1&quot; data-column=&quot;2&quot;&gt;&lt;/div&gt;
  3.     &lt;div class=&quot;game-cell&quot; data-row=&quot;1&quot; data-column=&quot;3&quot;&gt;&lt;/div&gt;
  4.     &lt;div class=&quot;game-cell&quot; data-row=&quot;2&quot; data-column=&quot;1&quot;&gt;&lt;/div&gt;
  5.     &lt;div class=&quot;game-cell&quot; data-row=&quot;2&quot; data-column=&quot;2&quot;&gt;&lt;/div&gt;
  6.     &lt;div class=&quot;game-cell&quot; data-row=&quot;2&quot; data-column=&quot;3&quot;&gt;&lt;/div&gt;
  7.     &lt;div class=&quot;game-cell&quot; data-row=&quot;3&quot; data-column=&quot;1&quot;&gt;&lt;/div&gt;
  8.     &lt;div class=&quot;game-cell&quot; data-row=&quot;3&quot; data-column=&quot;2&quot;&gt;&lt;/div&gt;
  9.     &lt;div class=&quot;game-cell&quot; data-row=&quot;3&quot; data-column=&quot;3&quot;&gt;&lt;/div&gt;

I am trying to select one of them at a time using

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

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:

  1. &lt;div class=&quot;game-cell&quot; data-row=&quot;1&quot; data-column=&quot;1&quot;&gt;

Why is this happening? Am I doing something wrong? How can I select the node I want?

答案1

得分: 2

移除列：

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

替代方法：

  1. let myelement;
  2. document.querySelectorAll('.game-cell').forEach(cell => {
  3.   myrow = cell.dataset.row;
  4.   mycolumn = cell.dataset.column;
  5.   if (myrow == x && mycolumn == y) {
  6.     myelement = cell;
  7.   }
  8. });
英文:

Remove the columns:

  1. document.querySelector(&#39;.game-cell[data-row=&quot;1&quot;][data-column=&quot;2&quot;]&#39;);

An alternative:

  1. let myelement;
  2. document.querySelectorAll(&#39;.game-cell&#39;).forEach(cell =&gt; () { 
  3.   myrow = cell.dataset.row;
  4.   mycolumn = cell.dataset.column;
  5.   if (myrow == x &amp;&amp; mycolumn == y) { //you specify &#39;x&#39; and &#39;y&#39;
  6.     myelement = cell;
  7.   }
  8. });

答案2

得分: 1

你也可以使用选择器来匹配所有带有'game-cell'类的元素，然后可以使用纯JS基于它们的行和列属性来过滤结果：

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

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 :

  1. const cells = document.querySelectorAll(&#39;.game-cell&#39;);
  2. const targetCell = Array.from(cells).find(cell =&gt; 
  3.   cell.getAttribute(&#39;data-row&#39;) === &#39;1&#39; &amp;&amp; cell.getAttribute(&#39;data-column&#39;) === &#39;2&#39;
  4. );

huangapple
  • 本文由 发表于 2023年2月27日 16:59:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/75578454.html
  • css-selectors
  • dom
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定