一个获取元素javascript中的多个ID

Question

现在，这很难看，我如何将它们放在 1 行中

function side1() {
  document.getElementById('side-open1').classList.remove('side-open-dpn');
  document.getElementById('item-link1').classList.add('side-open-dpn');
  document.getElementById('item-link2').classList.add('side-open-dpn');
  document.getElementById('item-link3').classList.add('side-open-dpn');
  document.getElementById('item-link4').classList.add('side-open-dpn');
  document.getElementById('item-link5').classList.add('side-open-dpn');
}
function back1() {
  document.getElementById('side-open1').classList.add('side-open-dpn');
  document.getElementById('item-link1').classList.remove('side-open-dpn');
  document.getElementById('item-link2').classList.remove('side-open-dpn');
  document.getElementById('item-link3').classList.remove('side-open-dpn');
  document.getElementById('item-link4').classList.remove('side-open-dpn');
  document.getElementById('item-link5').classList.remove('side-open-dpn');
}

我想同时选择 item-link(1;5)，也尝试了 querlySelectroAll，但也许我做错了什么

Answer 1

你可以用他们的 id 来选择他们，因为他们的所有 id 都以item-link 开头，你可以使用document.querySelectorAll("[id^='item-link']")

"[id^='item-link']" 将选择 id 以item-link 开头的所有元素

const nodes = document.querySelectorAll("[id^='item-link']");
console.log(nodes);

<div id="item-link1"></div>
<div id="item-link2"></div>
<div id="item-link3"></div>
<div id="item-link4"></div>
<div id="item-link5"></div>