先来看看效果
效果
我们通过两组radio来分别设置样式和位置。通常的做法是选中一个radio的时候判断其它radio的状态，比如当选中样式1的时候，判断位置组的radio哪个被选中，这样一次需要做3个判断，同样当位置组的某个radio被选中时，也需要判断3次样式组哪个radio被选中了，这样要实现3种样式*3种位置=9种状态一共需要做18次判断，即便做18次判断不是个事儿，到时候也可能会把自己饶晕。可能也会有朋友说如果是变换位置，可以直接使用“移动”动作，当然这也是可以的，但如果两组radio分别控制的是样式和字号而不是位置，那移动动作就用不上了，所以今天我们探讨一种更加通用的方法：借助全局变量实现多组radio对动态面板状态的筛选。
制作动态面板状态
先理一下怎么实现示例的效果：首先动态面板要实现多少种效果，那就需要做多少种效果，这其实是个苦力活儿，在做状态的过程中要注意对各个状态的准确命令，以方便后面进行判断
在动态面板中制作不同状态
-
样式1居左
样式1居左
-
样式2居左
样式2居左
-
样式3居左
样式3居左
以上只是示例了各个样式居左的效果
各状态的命名要有明确区分
动态面板命名
配置全局变量
因为我们有两组控制radio，所以我们需要通过两个全局变量来保存每组radio的状态值，比如我们现在用“type”变量对应“样式”的值，初始样式为“样式1”，通过“location”变量对应“位置”的值，初始位置为“居左”
全局变量
控制全局变量
之所以通过全局变量来保存各组radio的值是因为每组radio都控制相似的状态，比如样式或者状态，那在同一时刻每组radio看我会有一个有效状态，这个状态即是全局变量中保存的状态，我们仅需要判断全局变量的值就可以知道每组radio当前的有效状态，而不用关注每组radio到底哪个状态被选中了。
以“样式1”radio为例，当它被选中时就将自己的元件文字“样式1”写入“type”变量，同理当其它radio被选中时，它们就只需要将自己的原件文字写入对应的全局变量即可
写入全局变量
写入元件文字
你们肯定注意到了，当radio被选中时除了写值，它还会将动态面板 “样式”先隐藏再显示出来，为什么要样做呢？
因为我们希望实现我变更了radio的选中状态时动态面板就相应的变换，也就是需要刷新动态面板的状态，但是动态面板支持的动作却没有“刷新”这个动作，但是却有一个“显示时”的动作，这样我们可以通过先将它隐藏再显示出来造出一个“刷新”效果
动态面板“显示”条件
让动态面板响应全局变量
当以上的工作完成之后，我们还差最后一步，让动态面板每次刷新时根据全局变量的值显示对应的状态。
我们为动态面板“样式”添加一个“显示时”的用例，当显示时先判断全局变量的值，再显示对应的状态。比如我们判断当“type”等于“样式1”，“location”等于“居左”时显示状态“样式1居左”，同理，其它的状态仅需要按照全局变量的组合值做显示即可，即便有多个控制组，每个控制组有多个控制状态只需要按部就班的做判断就行了
判断全局变量
设置面板状态
最后，我们就能实现示例的效果，稍做改动，就可以运用到其它多组控制项对动态面板状态的筛选场景中
效果
这里只是提供了一个比较通用的方法实现多组radio对动态面板的筛选效果，如果大家有任何疑问或者其他方法，可以通过留言一起交流~
网友评论