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

warnerwu 發布于2019-08-26 13:32 / 3163人閱讀

摘要：當變選中狀態變更時對所有的備選進行遍歷主要作用是把所有的項目重置成未選中。該方案主要就是進行元素的查詢及更改。多選場景解決方法基本思想是使用數組保存已經選中的項，然后多該數組進行棧操作。

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

場景

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

有很多的帶選項，其效果是選中和未選中

有的是多選，有的是單選

解決

1.單選場景

因為是單選場景所以需要切換

解決方法一

設定每個備選狀態為選中和未選中。

當變選中狀態變更時對所有的備選進行遍歷主要作用是：

把所有的項目重置成未選中。

把選中的那個項目設置成選中狀態。

解決方法二

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

設置一個值currentSelected。

該值可以有兩個狀態，一是無值，二是選中的某個值。
該值應該是一個標志值，也可以是個實際值。

當在選中項目之間切換時，只是更改currentSelected的值即可。

每次在選中的項目之間切換時遍歷整個項目，然后如果狀態的設置為選中，不符合的設置為未選中。

如果currentSelected已經存在，那么不進行任何操作。

解決方案三

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

2.多選場景

解決方法

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

云服務器 GPU云服務器買云服務器選多大帶寬好阿里云服務器系統盤選多大合適單選框單選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108999.html

vue實現單選多選反選全選全不選

摘要：多選如果已經選中了，那就取消選中，如果沒有，則選中接下來我們寫一下全選，全取消，反選的實現。單選當我們用v-for渲染一組數據的時候，我們可以帶上index以便區分他們我們這里利用這個index來簡單地實現單選 {{item}} 首選定義一個selectedNum,當我們點擊item時，便把這個selectedNum更改為我們所點擊的item的index，然后每個item上加入判...

劉福 2019-08-23 11:50 評論0 收藏0
【收藏】這么多WEB組件(CSS)，攢一個網站夠了吧？

摘要：因時間不足，能力有限等原因，存在文字闡述不準及代碼測試不足等諸多問題。因此只限于學習范圍，不適用于實際應用。另外各個組件之件沒有聯系，包括字體及配色甚至布局都是相互獨立的。 1 表單(form)相關 1.1 輸入框(input) 一個簡單的輸入框樣式，簡捷又不夸張。需要約30行的CSS代碼。 showImg(http://res.42du.cn/up/201803/mxi6rzu3.j...

不知名網友 2019-08-30 14:19 評論0 收藏0
1248轉ABCD

摘要：另外，題目的選項是數組的索引，所以不需要用到這個方法，這個只是選擇題的答案，根據索引來顯示對應的可以用這個同樣也是根據碼來轉換的額，應當對傳入的值進行限制，但是我懶，哈哈。由于項目是教育類的，所以會遇到選擇題，單選多選不定項之類的，而從后臺傳過來的答案是1,2,4,8之類的數字，用來對應ABCD,采用數值相加來解決多選問題，比如后臺傳來的值是8，就是對應選項D，而穿過15，就對應1+...

FrozenMap 2019-08-22 16:08 評論0 收藏0