乐趣区

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

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

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

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

解决

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

解决方法一

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

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

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

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

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

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

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

退出移动版