編輯導語：在上一篇文章中，作者分析了中繼器在不同場景下的樣式處理方式。本文緊接上文，繼續分享了多個條件判斷的更優雅的處理方式。
在上次的 《中繼器的不同場景下的樣式處理》裏留了一個話題，如何處理多個條件判斷。即如果要滿足多個條件，如何遍歷每個場景並處理。繼續看一下上次的問題：
- 有新消息，有免打擾
- 有新消息，無免打擾
- 無新消息，有免打擾
- 無新消息，無免打擾
正常的思路和之前解釋的一樣，把上面這個4個場景遍歷一下，即：ifnew_msg == “1”並且mute ==”1″
–顯示小紅點，顯示免打擾圖標
elseifnew_msg==”1″並且mute ==”0″
–顯示小紅點，不顯示免打擾圖標
elseifnew_msg==”0″並且mute ==”1″
–不顯示小紅點，顯示免打擾圖標
else ifnew_msg==”0″並且mute ==”0″
–不顯示小紅點，不顯示免打擾圖標
如果有三個或更多條件，每個表達式裏就有更多的判斷，非常麻煩。
一、交互處理今天説的方法，使用Axure的是一個不起眼的動作：觸發事件，可能很少有人使用。
- 在任意某個元件上，添加一個事件，例如單擊事件。
- 這個事件只判斷一個條件，例如如果有新消息就顯示小紅點，否則不顯示。
- 在另外一個元件上，重複1~2的步驟，處理其它條件判斷。
- 在中繼器的每項加載事件裏，分別觸發新加的元件上的事件。
這樣做的好處是：
按照上面的步驟，我們看上次的問題如何處理：
1）在任意某個元件上，添加一個事件，例如單擊事件
為了不影響現有的內容，我經常是加一個熱區元件，因為它本來在界面是就不可見，同時防止它響應鼠標事件，把它隱藏起來，這樣徹底不影響我們的界面操作。
2）這個事件只判斷一個條件，例如如果有新消息就顯示小紅點，否則不顯示
添加單擊事件，你也可以添加雙擊事件，後面觸發這個事件即可。事件裏判斷new_msg，如果等於1就顯示小紅點，否則就隱藏。
3）在另外一個元件上，重複1~2的步驟，處理其它條件判斷
同理添加另外一個熱區元件，處理mute判斷。
4）在中繼器的每項加載事件裏，分別觸發新加的元件上的事件
回到中繼器的每項加載事件裏，簡化它原來的事件處理。
這裏只有設置文本和兩個觸發事件，觸發的事件內部做了邏輯判斷。因為中繼器的邏輯是可以實時看到的，看看預覽效果。
實際的預覽效果：
核對一下數據，看看是否與給定的條件相符：
- 第一個顯示新消息，顯示免打擾圖標(new_msg=1,mute=1)。
- 第二個都不顯示(new_msg=0,mute=0)。
- 第三個只顯示免打擾(new_msg=0,mute=1)。
- 第四個只顯示新消息(new_msg=1,mute=0)。
是不是處理的方式更優雅了呢？
如果有第三個條件，只要再加個熱區單擊事件處理，然後觸發它的事件。
二、小結事件觸發操作就像函數調用一樣，在另外一個元件上添加好邏輯，然後去觸發它。這種方式處理的好處是邏輯簡單，思路清晰。
你一定要動手試一下哦~
本文由 @Axure原型設計工場 原創發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議