Javascript 用于多个div的classList.toggle（）

我有3个div作为颜色可供选择，还有3个空白div。我想让用户能够：

（1）单击彩色DIV，然后单击空白DIV，然后将空白DIV作为用户选择的颜色着色。代码似乎起作用了

（2） 我希望用户能够再次单击彩色空白div，它将变为白色。代码似乎起作用了

问题是，如果空白DIV被着色并且用户选择另一种颜色并再次单击彩色空白DIV，则会将新的颜色类添加到DIV中，并且事情变得不可预知。您可以打开控制台并跟踪空白div类的混乱变化。

我怎样才能解决这个问题？我只希望空白div在两个类之间切换。

var chosenColor；
函数pickColor（arg）{
chosenColor=arg.id；
}
功能图（id）{
document.getElementById（id）.classList.toggle（“白色”）；
document.getElementById（id）.classList.toggle（chosenColor）；
}

.box{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
}
.red{背景：red}
.blue{背景：蓝色；}
.yellow{背景：黄色；}
.white{背景：白色；}

1.
2.
3.



4.
5.
6.

检查元素的

类名

是否为

白色

。如果不是，则将其类名设置为

白色

——否则，将其设置为所选颜色。您可以将框放入容器中，然后使用

.container>div

选择器，这样就不需要为框指定

.box

类。此外，在侦听器中，

此

将引用已单击的元素-当您已经有对元素的引用时，无需使用

getElementById

var chosenColor；
函数pickColor（arg）{
chosenColor=arg.id；
}
函数图（元素，id）{
如果（element.className！='white'）element.className='white'；
else element.className=chosenColor；
}

.container>div{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
}
瑞德先生{
背景：红色
}
蓝先生{
背景：蓝色；
}
黄先生{
背景：黄色；
}
怀特先生{
背景：白色；
}

1.
2.
3.



4.
5.
6.

不使用类，而是遇到分配多个嵌套类或必须使用复杂的白色逻辑的问题

我会使用

data-*

属性：

var chosenColor；
功能拾取（el）{
chosenColor=el.dataset.color；
}
功能图（el）{
el.dataset.color=el.dataset.color？”“：chosenColor；
}

body{背景：#eee；}
.盒子{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
背景：白色；/*默认*/
}
[数据颜色=红色]{背景：红色；}
[数据颜色=蓝色]{背景：蓝色；}
[数据颜色=黄色]{背景：黄色；}

1
2.
3.



4.
5.
6

回答 参见-（注释代码）

或者

var-activeColor
函数setPickerColor（事件）{
activeColor=event.target.dataset.boxColorIs
}
函数setThisBoxColor（事件）{
让元素=event.target
让\u this\u box的\u existing\u color\u=element.dataset.boxColorIs
if（此\u框的\u现有\u颜色==activeColor）{
删除element.dataset.boxColorIs
}否则{
element.dataset.boxColorIs=activeColor
}
}

.box{
宽度：100px；
高度：100px；
边框：1px纯黑；
显示：内联块；
背景：白色；
}
[数据框颜色为=“红色”]{
背景：红色
}
[数据框颜色为=“蓝色”]{
背景：蓝色；
}
[数据框颜色为=“黄色”]{
背景：黄色；
}

1.
2.
3.




4.
5.
6.

因此，即使用户在两者之间选择了另一种颜色，您也希望彩色空白div再次变为白色？是的，certainperformance的答案正是我想要的