如何通过选择all id使js代码更简单

Question

如何使下面的代码更简单、更简短

html：

<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" onclick="myFunction1()">1</label>
    <label id="point-2" for="radio2" class="manual-btn" onclick="myFunction2()">2</label>
    <label id="point-3" for="radio3" class="manual-btn" onclick="myFunction3()">3</label>
    <label id="point-4" for="radio4" class="manual-btn" onclick="myFunction4()">4</label>
  </div>

我制作了4个按钮，如果单击按钮1，背景将变为白色，当单击按钮2时，背景将变为白色，但按钮1的背景色恢复到原来的颜色，也适用于其他按钮。

联署材料：

function myFunction1(){
    document.getElementById("point-1").style.background = "white";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-3").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction2(){
    document.getElementById("point-2").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-3").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction3(){
    document.getElementById("point-3").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-4").style.background = "none";
  }

  function myFunction4(){
    document.getElementById("point-4").style.background = "white";
    document.getElementById("point-1").style.background = "none";
    document.getElementById("point-2").style.background = "none";
    document.getElementById("point-3").style.background = "none";
  }

Answer 1

您可以尝试首先重置所有项目的背景。

​

function labelClick(selectedId){
    document.querySelectorAll('.manual-btn').forEach(label => {
      label.style.background = "none";
    })
    document.getElementById(selectedId).style.background = "white";
  }

.navigation-manual {
  background-color: gray;
}

<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" onclick="labelClick('point-1')">1</label>
    <label id="point-2" for="radio2" class="manual-btn" onclick="labelClick('point-2')">2</label>
    <label id="point-3" for="radio3" class="manual-btn" onclick="labelClick('point-3')">3</label>
    <label id="point-4" for="radio4" class="manual-btn" onclick="labelClick('point-4')">4</label>
  </div>

​

或者，您可以尝试侦听现有的单选按钮更改事件。

Answer 2

这个应该可以用白色代替红色

​

const labels = document.querySelectorAll(".manual-btn")

labels.forEach(l => l.addEventListener("click", () => {
  labels.forEach(l => {l.style.background = "none"})
  l.style.background = "red"
}));

<div class="navigation-manual">
    <label id="point-1" for="radio1" class="manual-btn other" >1</label>
    <label id="point-2" for="radio2" class="manual-btn" >2</label>
    <label id="point-3" for="radio3" class="manual-btn" >3</label>
    <label id="point-4" for="radio4" class="manual-btn">4</label>
  </div>

​