javascript - 如何在 javascript(无 jquery)中查询数据属性值？

Question

如果我有一个由 ul's(行)和 li's(单元格)组成的网格，我想根据数据属性值获取特定的单元格ul 和 li 的:

document.querySelectorAll(div.grid ul[data-${this.y}] li[data-${this.x}]'_

当我在 MDN 上搜索时，我只找到了如何根据 data 属性 检索 html 元素，但没有找到它的值。

如有任何指点，我们将不胜感激 - 也请不要使用 jQuery。

Answer 1

您可以使用字符串插值并让它工作。

这是您可以执行的操作。

document.addEventListener('DOMContentLoaded', function() {

  let ulData = 2,
    liData = 4;

  document.querySelector(`div.grid ul[data="${ulData}"] li[data="${liData}"]`).classList.add("red");
});

.red {
  color: red;
}

<div class="grid">
  <ul data="2">
    <li data="1">
      One
    </li>
    <li data="2">
      Two
    </li>
    <li data="3">
      Three
    </li>
    <li data="4">
      Four
    </li>
    <li data="5">
      Five
    </li>
  </ul>
</div>