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

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

场景

常常遇到一些相似菜单和导航这样的页面效果需求，基本状况是：

1. 有不少的带选项，其效果是选中和未选中
2. 有的是多选，有的是单选

解决

1.单选场景

• 由于是单选场景因此须要切换

解决方法一

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

2. 当变选中状态变动时对全部的备选进行遍历主要做用是：

   1. 把全部的项目重置成未选中。
   2. 把选中的那个项目设置成选中状态。

解决方法二

该方法主要是结合了视觉和数据两方面的考虑，利用比较的方式动态的设置class来呈现效果。

1. 设置一个值currentSelected。

该值能够有两个状态，一是无值，二是选中的某个值。
该值应该是一个标志值，也能够是个实际值。

1. 当在选中项目之间切换时，只是更改currentSelected的值便可。
2. 每次在选中的项目之间切换时遍历整个项目，而后若是状态的设置为选中，不符合的设置为未选中。
3. 若是currentSelected已经存在，那么不进行任何操做。

解决方案三

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

2.多选场景

解决方法

基本思想是使用数组保存已经选中的项，而后多该数组进行栈操做。