javascript - 如何切换 div 列表中的背景颜色？

Question

从元素列表中，每个元素都在单独的 div 中，用户只能选择并单击一个。所选背景颜色应发生变化。如果用户改变主意，他们可以选择另一个，背景颜色应更改为所选颜色，列表中的所有其他 div 应更改回默认背景颜色。

这与表单上的单选按钮的逻辑基本相同。一次只能选择一个。

我如何实现这一目标？

我尝试使用 element.classList.toggle 属性。但它只能单独处理每个。是否有 javascript 命令来处理这个问题？

    <style> 
    .teamSelected{
        background-color: red;
        border-radius: 4px;
    }
    </style>

    <div  onclick="toggleBackground(team1)"> 
            <div id="team1">
            </div>
    </div>
    <div  onclick="toggleBackground(team2)"> 
            <div id="team2">
            </div>
    </div> 
    <div  onclick="toggleBackground(team3)"> 
            <div id="team3">
            </div>
    </div>  


    <script>
       function toggleBackground(teamnumber) {
                var element = document.getElementById(teamnumber);
                    if (element) {
                        element.classList.toggle("teamSelected");  
                    }
                }
    </script> 

谢谢!

Answer 1

您将不存在的变量传递给函数。您需要将它们放在引号中，因为该函数需要字符串。

const allDivs = document.querySelectorAll('.div');

function toggleBackground(teamnumber) {
  var element = document.getElementById(teamnumber);
  if (element) {
    allDivs.forEach(function(el){
      el.classList.remove('teamSelected');
    });
    element.classList.add("teamSelected");
  }
}

.toggle > div {
   width: 100px;
   height: 100px;
   border: 1px solid #000;
}
.teamSelected {
  background-color: red;
  border-radius: 4px;
}

<div onclick="toggleBackground('team1')" class="toggle">
  <div id="team1" class="div">
  </div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
  <div id="team2" class="div">
  </div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
  <div id="team3" class="div">
  </div>
</div>