单选多选场景的解决方案集合

共计 499 个字符，预计需要花费 2 分钟才能阅读完成。

单选多选场景的解决方案集合

场景
经常遇到一些类似菜单和导航这样的页面效果需求，基本情况是：

有很多的带选项，其效果是选中和未选中
有的是多选，有的是单选

解决

1. 单选场景
因为是单选场景所以需要切换

解决方法一

设定每个备选状态为选中和未选中。

当变选中状态变更时对所有的备选进行遍历主要作用是：

把所有的项目重置成未选中。
把选中的那个项目设置成选中状态。

解决方法二
该方法主要是结合了视觉和数据两方面的考虑，利用比较的方式动态的设置 class 来呈现效果。
设置一个值 currentSelected。
该值可以有两个状态，一是无值，二是选中的某个值。该值应该是一个标志值，也可以是个实际值。

当在选中项目之间切换时，只是更改 currentSelected 的值即可。
每次在选中的项目之间切换时遍历整个项目，然后如果状态的设置为选中，不符合的设置为未选中。
如果 currentSelected 已经存在，那么不进行任何操作。

解决方案三
该解决方案不用遍历，基本思想是，把已经存储的相更改状态，把选中的线在更改状态。该方案主要就是进行 el 元素的查询及更改。
2. 多选场景

解决方法
基本思想是使用数组保存已经选中的项，然后多该数组进行栈操作。