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

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

场景

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

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

解决

1.单选场景

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

解决方法一

  1. 设定每个备选状态为选中未选中
  2. 当变选中状态变更时对所有的备选进行遍历主要作用是:

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

解决方法二

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

  1. 设置一个值currentSelected

该值可以有两个状态,一是无值,二是选中的某个值。
该值应该是一个标志值,也可以是个实际值。

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

解决方案三

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

2.多选场景

解决方法

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

阅读 434

推荐阅读

近几年来前端的变化记录

38 人关注
37 篇文章
专栏主页