Query Selector for data - Uncaught SyntaxError: Invalid or unexpected token

Question

var elem = document.getElementsByClassName("briefsectiontop").querySelector("[data=" + i + "]").getElementsByClassName("current")[0];
if (elem.style.display == "none") {
  elem.style.display = "block";
} else {
  elem.style.display = "none";
};

还有其他 div 元素，但这应该足以了解基本 HTML 的样子，为什么它不接受我的查询？

Answer 1

如果要搜索的值以数字开头或包含任何非字母数字字符，则必须用引号引起来：

.querySelector(`[data="${i}"]`)

但是getElementsByClassNamereturns是一个集合，不是单个元素，所以你不能对它调用querySelector。

相反，请考虑仅使用 单个调用 of querySelector:

const elm = document.querySelector(`.briefsectiontop [data="${i}"] .current`);

这将 select 一个 .current 元素，它的祖先元素具有您正在寻找的 data 属性，它也有一个祖先元素具有 briefsectiontop class名字。 CSS select 或者允许非常简洁的方式来识别元素。

const i = 3;
const elm = document.querySelector(`.briefsectiontop [data="${i}"] .current`);
console.log(elm);

<div class="briefsectiontop">
  <div data="3">
    <div class="current">
      content
    </div>
  </div>
</div>

Query Selector for data - Uncaught SyntaxError: Invalid or unexpected token

Query Selector for data - Uncaught SyntaxError: Invalid or unexpected token

javascript

queryselector