Question

我在下面的html块中：

    <a class="item">
      <i class="sign out icon" id="out1"></i>
      <span class="text out" id="out2">Sign out</span>
    </a>

如果单击a中的任何元素，我需要触发一个动作，当我使用id项时，以下代码可以正常工作：

document.querySelector("#out1, #out2").onclick = function(e) {}

但是当我尝试class项时，以下内容不起作用：

document.querySelector(".sign .out .icon, .text .out").onclick = function(e) {}

我尝试通过以下内容使其变得简单，但效果不佳：

document.querySelectorAll(".out").onclick = function(e) {}

Answer 1

document.querySelector的工作方式类似于css选择器，document.querySelector('.sign .out .icon')将在icon内的元素.out中寻找类为.sign的元素，如果您删除空格，它应该可以正常工作：

document.querySelector(".sign.out.icon, .text.out").onclick = function(e) {}

请记住，querySelector将返回第一个匹配项，因此选择器字符串中的逗号不是很有用，MDN：

Document方法querySelector（）返回其中的第一个Element 与指定选择器或一组匹配的文档选择器。如果没有找到匹配项，则返回null。

document.querySelectorAll返回一个节点列表，您必须遍历它并处理onclick或使用[0]访问第一个元素：

document.querySelectorAll(".out")[0].onclick = function(e) {}

const a = document.querySelector(".sign .out .icon, .text .out");
const b = document.querySelector(".sign.out.icon, .text.out");

console.log({a, b});

const c = document.querySelectorAll(".out");

console.log(c[0]);

<a class="item">
  <i class="sign out icon" id="out1"></i>
  <span class="text out" id="out2">Sign out</span>
</a>

要添加ALL的列表器，则可以按以下方式使用forEach：

var out = document.querySelectorAll(".out");

out.forEach((e) => {
  e.onclick = function(e) {
    fetch('http://localhost:8000/logout')
      .then(window.location.reload(true));
  };
});

querySelector不与类一起使用，但与id一起使用

1 个答案: