鍍金池/ 問答/HTML/ js根據(jù)不同的選擇狀態(tài)顯示不同的內(nèi)容

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

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

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

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

我想問下有什么更高效的方法？

回答
編輯回答
扯機薄

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

2017年1月16日 14:18
編輯回答
笨笨噠

我覺得可以用觀察者模式(也可理解為訂閱者)來做，因為從需求上來看，是觸發(fā)一個事件，會導(dǎo)致多個關(guān)聯(lián)實體的狀態(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;
 })

其他差不多的邏輯，不過感覺也不是很好的辦法，

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

2018年1月20日 20:43