Javascript：切换多个元素的更改内容

Question

我有一个简单的javascript代码，可以更改span元素的内容。现在，此脚本仅适用于第一个 span 元素。我该如何修复它以使所有跨度都可更改，只有一个没有多个javascript脚本？我的代码：const span = document.querySelector('span');span.addEventListener('click', (event) => {  if (event.target.innerHTML === "Zavolajte nám ihneď") {    event.target.innerHTML = "[phone]";  } else {    event.target.innerHTML = "Zavolajte nám ihneď";  }})<span>Zavolajte nám ihneď</span><br><br><span>Zavolajte nám ihneď</span>

Answer 1

您必须使用并循环访问返回的集合：querySelectorAll

const spans = document.querySelectorAll('span');

spans.forEach(span => span.addEventListener('click', (event) => {

  if (event.target.innerHTML === "Zavolajte nám ihneď") {

    event.target.innerHTML = "[phone]";

  } else {

    event.target.innerHTML = "Zavolajte nám ihneď";

  }

}));

<span>Zavolajte nám ihneď</span><br><br>

<span>Zavolajte nám ihneď</span>

querySelector仅返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。