如何编写正确的查询选择器

Question

我的完整js

navHighlighter() {

const sections = document.querySelectorAll("section[id]");
let scrollY = window.pageYOffset;

sections.forEach(current => {
  const sectionHeight = current.clientHeight;

  const sectionTop = (current.getBoundingClientRect().top + window.pageYOffset) - 50;
  var sectionId = current.getAttribute("id");

  var indicator = document.querySelector(".indexing a[(click)=jump(" + sectionId + ")] ");

  if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
    indicator?.classList.add('active');
  } else {
    indicator?.classList.remove('active');
  }
});

}

这是我要写在queryselector

中的html

<div class="indexing">   
   <a (click)="jump('labeled')">Labeled</a>
   <a (click)="jump('grey')">Labeled</a>
</div>

下面是我写的错误选择器：

var indicator = document.querySelector(".indexing a[(click)=jump(" + sectionId + ")] ");

标注的是sectionId

Answer 1

您可以尝试使用转义字符 select 带括号的属性名称。

document.querySelector(".indexing a[\(click\)=\"jump('" + sectionId + "')\"]");

如何编写正确的查询选择器

How to write a correct querySelector

javascript

selector

typescript

angular