时间戳

首页 > 解决方案 > querySelector 中的 Javascript Varialbe 返回 null

javascript - querySelector 中的 Javascript Varialbe 返回 null

问题描述

我无法让变量在 querySelector 中工作。我有一个这样的链接：

<a class="ast-linkto linkto-howitworks">Click to Scroll</a>

在页面的下方有这样的部分：


<section id="howitworks">
Content here.
</section>

这是导致问题的功能的一部分。console.log 工作正常，它在控制台中记录 linkToTargetId #howitworks，所以没问题。但我做不到document.querySelector(linkToTargetId)，如果我尝试以任何方式将该变量括在引号中，我会收到一个错误，指出它不是有效的选择器。我知道我错过了一些简单的东西。document.querySelector("#howitworks").innerHTML 确实返回了预期的结果，所以它不像#howitworks 不存在。

document.querySelectorAll('.ast-linkto').forEach(function(item) {
    var regx = new RegExp('\\b' + 'linkto-' + '[^ ]*[ ]?\\b', 'g');
    var linkToTargetClass = item.className.match(regx, '')[0];
    var linkToTargetId = '#' + linkToTargetClass.substring(linkToTargetClass.indexOf("-") + 1);
    console.log(linkToTargetId);

    /* Please let one of these work! */
    console.log(document.querySelector(linkToTargetId).innerHTML);
    console.log(document.querySelector("'"+linkToTargetId+"'").innerHTML);

这是一个片段：

document.querySelectorAll('.ast-linkto').forEach(function(item) {
  var regx = new RegExp('\\b' + 'linkto-' + '[^ ]*[ ]?\\b', 'g');
  var linkToTargetClass = item.className.match(regx, '')[0];
  var linkToTargetId = '#' + linkToTargetClass.substring(linkToTargetClass.indexOf("-") + 1);
  console.log(linkToTargetId);

  /* Please let one of these work! */
  console.log(document.querySelector(linkToTargetId).innerHTML);
  console.log(document.querySelector("'" + linkToTargetId + "'").innerHTML);
})
<a class="ast-linkto linkto-howitworks">Click to Scroll</a>

<section id="howitworks">
  Content here.
</section>

标签： javascriptvariablesselectors-api

解决方案

想通了一些东西：

document.querySelectorAll('.ast-linkto').forEach(function(item) {
var regx = new RegExp('\\b' + 'linkto-' + '[^ ]*[ ]?\\b', 'g');
var linkToTargetClass = item.className.match(regx, '')[0];
var linkToTargetId = '#' + linkToTargetClass.substring(linkToTargetClass.indexOf("-") + 1);
console.log(linkToTargetId);

    item.addEventListener('click', function(event) {
        console.log(document.querySelector("" + linkToTargetId + "").innerHTML);
    })
});

无论如何，单击这些链接是主要思想，因此在单击功能中添加 console.log 是可行的！

推荐阅读