js根据不同的选择状态显示不同的内容

Question

根据上面的图，大概逻辑就是开始除第一个select选项可以选择之外，其他所有的元素都是disable状态不可点击当选择不喝的时候，其余元素依旧不可点击，选择喝之后解锁一些元素比如可以输入每天喝多少酒当我在是否已戒酒的选项中选择已戒的时候，何时起开始戒酒的Input随之解锁点击其他的时候最后一个Input解锁白天功能是很顺利的完成了，但是我觉得我的做法不是很好，我把所有的依赖关系当参数传入了函数[  {el:'是否喝酒的select',keywords:'不喝',nodelist:['每天喝多少酒'，'喜欢喝什么酒的radio']}，{el:'是已戒酒的select'，keywords:'已戒',nodelist:['何时起开始戒酒的Input']}]我想问下有什么更高效的方法？

Answer 1

我觉得可以用观察者模式(也可理解为订阅者)来做，因为从需求上来看，是触发一个事件，会导致多个关联实体的状态变化。

 var pubSub = new PubSub();

 

 $喝酒select.addEventListener('change', function() {

    if (喝酒) {

        pubSub.emit('喝酒');

    } else if (不喝){

        pubSub.emit('不喝')；

    }

 })

 pubSub.on('喝酒', function() {

    $喝多少.disabled = false;

    $喜欢喝什么.disabled = false;

 })

pubSub.on('不喝', function() {

    $喝多少.disabled = true;

    $喜欢喝什么.disabled = true;

 })

其他差不多的逻辑，不过感觉也不是很好的办法，

还有一个，如果你用vue这种框架的话，其实可以定义数据状态，然后不同的组件 根据状态来渲染其实也是很方便的。

Answer 2

我想看一下你的函数怎么实现的？为什么说你的函数不高效，这样我们才能去寻找更高效的办法。