Javascript 如何在div列表中切换背景色？

从项目列表（每个项目位于单独的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> 

.组别{
背景色：红色；
边界半径：4px；
}
功能切换背景（组号）{
var元素=document.getElementById（teamnumber）；
if（元素）{
element.classList.toggle（“teamSelected”）；
}
}

---

谢谢

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

const allDivs=document.queryselectoral（'.div'）；
功能切换背景（组号）{
var元素=document.getElementById（teamnumber）；
if（元素）{
allDivs.forEach（函数（el）{
el.classList.remove（'teamSelected'）；
});
元素.classList.add（“teamSelected”）；
}
}

.toggle>div{
宽度：100px；
高度：100px；
边框：1px实心#000；
}
.组别{
背景色：红色；
边界半径：4px；
}

---

这似乎是你想要的

设x=（'.something'）；
$（x）.在（'单击'，函数（）上）{
$（x）.css（'background'，'blue'）；
$（this.css（'background'，'green'）；
});
什么{
宽度：100px；
高度：100px；
背景：黄色
}

您可以发布问题的完整代码吗？onclick=“toggleBackground（team1）”如果您可以将您的工作发布在代码片段中供我们审阅，那将非常有用。因此，请选择其他代码并删除classNice！我要试试这个和康斯特。谢谢@谢谢@YaakovAinspan！！成功了！如果您希望它只影响文档中的某些div，而不是所有div，该怎么办？我只给我想要应用的div分配了一个类：div>div.onlythis{background color:#fff；}和css:div>div.onlythis{background color:#fff；}，但它不起作用。有什么想法吗？谢谢我不太明白你的意思。这只会影响某些目标元素。您好，文档还有其他div，我不希望切换背景。在css:div>div{width:100px；height:100px；border:1px solid#000；}中，它影响所有div，包括菜单、页脚等的div。我只希望切换背景影响单击所在的div。如何对其进行编码，使其只影响我想要的div。我假设为它们分配一个类是解决方案的一部分。希望这是有意义的。谢谢好的，请参阅更新的代码段。只需添加一个类（在我的代码片段中，

.toggle

）并以该类为目标，而不是所有的

div

s。