js根據(jù)不同的選擇狀態(tài)顯示不同的內(nèi)容

根據(jù)上面的圖，大概邏輯就是開(kāi)始除第一個(gè)select選項(xiàng)可以選擇之外，其他所有的元素都是disable狀態(tài)不可點(diǎn)擊
當(dāng)選擇不喝的時(shí)候，其余元素依舊不可點(diǎn)擊，選擇喝之后解鎖一些元素比如可以輸入每天喝多少酒
當(dāng)我在是否已戒酒的選項(xiàng)中選擇已戒的時(shí)候，何時(shí)起開(kāi)始戒酒的Input隨之解鎖
點(diǎn)擊其他的時(shí)候最后一個(gè)Input解鎖

白天功能是很順利的完成了，但是我覺(jué)得我的做法不是很好，我把所有的依賴(lài)關(guān)系當(dāng)參數(shù)傳入了函數(shù)

[
  {el:'是否喝酒的select',keywords:'不喝',nodelist:['每天喝多少酒'，'喜歡喝什么酒的radio']}，
{el:'是已戒酒的select'，keywords:'已戒',nodelist:['何時(shí)起開(kāi)始戒酒的Input']}
]

我想問(wèn)下有什么更高效的方法？

回答

編輯回答

扯機(jī)薄

我想看一下你的函數(shù)怎么實(shí)現(xiàn)的？為什么說(shuō)你的函數(shù)不高效，這樣我們才能去尋找更高效的辦法。如果方便，把你實(shí)現(xiàn)的函數(shù)代碼貼一下

2017年1月16日 14:18

編輯回答

笨笨噠

我覺(jué)得可以用觀(guān)察者模式(也可理解為訂閱者)來(lái)做，因?yàn)閺男枨笊蟻?lái)看，是觸發(fā)一個(gè)事件，會(huì)導(dǎo)致多個(gè)關(guān)聯(lián)實(shí)體的狀態(tài)變化。

 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;
 })

其他差不多的邏輯，不過(guò)感覺(jué)也不是很好的辦法，

還有一個(gè)，如果你用vue這種框架的話(huà)，其實(shí)可以定義數(shù)據(jù)狀態(tài)，然后不同的組件根據(jù)狀態(tài)來(lái)渲染其實(shí)也是很方便的。

2018年1月20日 20:43