Javascript 首先单击选择分区并取消选择其他分区，然后再单击同一分区取消选择它

我希望有以下场景：

• 一次只能选择一个div（完成）
• 通过单击div，它应该被选中，而其他div应该保持未选中状态（DONE）
• 单击已选择的div，该div应取消选中，其他div也将保持未选中状态（要执行的操作）

我在实现最后一个功能时遇到了问题，通过单击已经选择的div取消选择它，其他已经工作的功能应该像以前一样工作。有人能帮我把它弄好吗

var x=document.getElementsByClassName（'optionsecoptions'））
对于（变量i=0；i

。选项选项选项{
宽度：400px；
左侧填充：10px；
高度：40px；
背景#bbb8b8；
浮动：左；
字体大小：20px；
光标：指针；
}
.选项选项选项：悬停，
.选项选项选项：活动{
背景色：#226fa3；
过渡：背景色0.4s缓进，边框色0.4s缓进；
颜色：#ffffff；
}
.选定{
背景色：#226fa3；
过渡：背景色0.4s缓进，边框色0.4s缓进；
颜色：#ffffff；
}

计算机
数码产品
机械的
与电有关的

您可以这样做：

// If there was a selected element which is not this
if (selectedEl && selectedEl !== this) {
  selectedEl.classList.remove("selected");
}
// Toggle this
this.classList.toggle("selected");

正如评论中提到的，你的风格有点误导人。您可能希望在

上使用不同的样式：悬停
和
。选中
。下面的演示也改变了这一点

演示：


var x=document.getElementsByClassName（'optionsecoptions'））
对于（变量i=0；i

。选项选项选项{
宽度：400px；
左侧填充：10px；
线高：40px；
背景：#需要；
字体大小：16px；
光标：指针；
字体系列：Arial、Helvetica、无衬线字体；
过渡：背景色0.1s，易于调整；
}
.options选项：悬停{背景色：#bfe5ff；}
.options选项：活动{背景色：#2d546f；颜色：#ffffff；}
.选定{背景色：#226fa3；颜色：#ffffff；}
.选定：悬停{背景色：#4d99cc；}

计算机
数码产品
机械的
与电有关的
您可以这样做：

// If there was a selected element which is not this
if (selectedEl && selectedEl !== this) {
  selectedEl.classList.remove("selected");
}
// Toggle this
this.classList.toggle("selected");

正如评论中提到的，你的风格有点误导人。您可能希望在
上使用不同的样式：悬停
和
。选中
。下面的演示也改变了这一点

演示：


var x=document.getElementsByClassName（'optionsecoptions'））
对于（变量i=0；i

。选项选项选项{
宽度：400px；
左侧填充：10px；
线高：40px；
背景：#需要；
字体大小：16px；
光标：指针；
字体系列：Arial、Helvetica、无衬线字体；
过渡：背景色0.1s，易于调整；
}
.options选项：悬停{背景色：#bfe5ff；}
.options选项：活动{背景色：#2d546f；颜色：#ffffff；}
.选定{背景色：#226fa3；颜色：#ffffff；}
.选定：悬停{背景色：#4d99cc；}

计算机
数码产品
机械的
与电有关的
您不仅没有描述为什么这样做，而且它没有按照OP的要求去做。@ScottMarcus？我真的很好奇你为什么这么说？我对我的代码进行了注释，据我所知，它符合OP的要求。有什么不同？单击一个项目（它将被选中）。再次单击该项目（它将保持选中状态）。OP希望在您单击某个已选择的项目时将其取消选中。应删除CSS
悬停
和
活动
伪类的使用，并且应仅使用JavaScript
.classList
执行此效果。不同颜色（对于取消选中的项目）更好，但我会建议悬停的颜色非常浅，选择的颜色非常深。我甚至可以在鼠标悬停时更改文本的颜色，在选择项目时更改背景的颜色。请记住，不同的人会有不同的视力，可能不会像你那样区分颜色。你不仅没有描述为什么这会起作用，而且它也不能满足OP要求。@ScottMarcus？我真的很好奇你为什么这么说？我对我的代码进行了注释，据我所知，它符合OP的要求。有什么不同？单击一个项目（它将被选中）。再次单击该项目（它将保持选中状态）。OP希望在您单击某个已选择的项目时将其取消选中。应删除CSS
悬停
和
活动
伪类的使用，并且应仅使用JavaScript
.classList
执行此效果。不同颜色（对于取消选中的项目）更好，但我会建议悬停的颜色非常浅，选择的颜色非常深。我甚至可以在鼠标悬停时更改文本的颜色，在选择项目时更改背景的颜色。记住，不同的人会有不同的视力，可能无法区分颜色