如何在Divs列表中切换背景颜色

Question

从一个项目列表中，每个项目中的每个单独的div，用户可以选择并仅单击一个。背景颜色应在选定的颜色上改变。如果用户改变主意，他们可以选择另一个，背景颜色应更改为所选颜色，列表中的所有其他divs都应更改为默认的背景颜色。

它基本上与表单上的无线电按钮相同。一次只能选择一个。

我该如何实现？

我尝试使用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>

Answer 2

似乎这是您想要的？

let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});

.something{
width: 100px;
height: 100px;
background: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <div  class="something"> 
            <div id="team1">
            </div>
    </div>
    <div  class="something"> 
            <div id="team2">
            </div>
    </div> 
    <div  class="something"> 
            <div id="team3">
            </div>
    </div>