單選多選場景的解決方案集合

單選多選場景的解決方案集合

場景

常常遇到一些相似菜單和導航這樣的頁面效果需求，基本狀況是：

1. 有不少的帶選項，其效果是選中和未選中
2. 有的是多選，有的是單選

解決

1.單選場景

• 由於是單選場景因此須要切換

解決方法一

1. 設定每一個備選狀態爲選中和未選中。

2. 當變選中狀態變動時對全部的備選進行遍歷主要做用是：

   1. 把全部的項目重置成未選中。
   2. 把選中的那個項目設置成選中狀態。

解決方法二

該方法主要是結合了視覺和數據兩方面的考慮，利用比較的方式動態的設置class來呈現效果。

1. 設置一個值currentSelected。

該值能夠有兩個狀態，一是無值，二是選中的某個值。
該值應該是一個標誌值，也能夠是個實際值。

1. 當在選中項目之間切換時，只是更改currentSelected的值便可。
2. 每次在選中的項目之間切換時遍歷整個項目，而後若是狀態的設置爲選中，不符合的設置爲未選中。
3. 若是currentSelected已經存在，那麼不進行任何操做。

解決方案三

該解決方案不用遍歷，基本思想是，把已經存儲的相更改狀態，把選中的線在更改狀態。
該方案主要就是進行el元素的查詢及更改。

2.多選場景

解決方法

基本思想是使用數組保存已經選中的項，而後多該數組進行棧操做。