[問題] bootstrap 改 class 過慢,和排版小問題

看板Web_Design作者 (∵:☆星痕╭☆)時間5年前 (2019/10/06 11:21), 5年前編輯推噓3(3010)
留言13則, 4人參與, 5年前最新討論串1/1
各位好,小弟做興趣的,不夠扎實 目前遇到兩個問題 先放一下範例 code https://jsbin.com/cavoluyoma/edit?html,js,console,output 1. 兩個 div,裡面都放一個段落<p> 和三個按紐 (一種是用 <button> 做的,一種是用 <label> 做的) 但是有一個總是無法讓 <p> 佔滿整個 div 的寬 試了很久沒有頭緒,是 <button> 和 <label> 之間有個不同的點 ? 以前曾經看過說這叫某某元素,但不知道怎麼查,求個提點與修改 2. 在這個範例 code 有使用 JS 去抓,哪個按鈕被按到了 我使用的方法是去 select 哪個 tag 有被 checked 而這個 checked,是 Bootstrap 自帶的控制,like radio button 理想中,應該是 點擊按紐 -> BS改 class 和 checked -> 我寫的 JS 抓到正確被點擊的 但是 BS 卻總是慢一拍,點擊->抓checked->BS才改 所以都會抓到錯的。 想問一下這部分有沒有方法可以解呢 ? 雖然說 真要說 可以全部 JS 都自刻, 但只是做個休閒用,想說能不能從這邊改善 另外,雖然可以在 listen 那邊呼叫函式的時候把 this 丟進去 但因為我是想要做到按按鈕 呼叫一個 computeResult() 就把所有被 checked 的項目重新套公式算完 如果傳 this 的話,可能要寫一堆 funtion 分別處理一樣的事情 舉例: computeResult(btn){ check btn is A_type or B_type // 總分公式 : A + 2*B if A_type return btn.score + 2*get_B_type_Score() else // B type return get_A_type_Score + 2*btn.score } 如果今天不指 A B Type 就更複雜了 抱歉後面打的有點多,希望能傳達到問題的意思 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 106.107.244.180 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1570332109.A.FE1.html

10/06 11:33, 5年前 , 1F
updateValueDescription外面加個setTimeout
10/06 11:33, 1F
的確是個很簡單易瞭的方法,如果有其他方法各位也能討論看看~ 剛剛測 500ms 勉強可 ※ 編輯: ekids1234 (106.107.244.180 臺灣), 10/06/2019 11:47:50

10/06 12:33, 5年前 , 2F
我剛剛測試不用加ms,那個是nexttick的問題啊...
10/06 12:33, 2F

10/06 12:34, 5年前 , 3F
另外也可以用setImmediate處理
10/06 12:34, 3F

10/06 13:20, 5年前 , 4F
1. player2沒有btn-group這個class提供的inline-flex
10/06 13:20, 4F

10/06 13:21, 5年前 , 5F
父層沒有flex, 子層的p就保留原先的block特性, 佔滿空間
10/06 13:21, 5F

10/06 16:16, 5年前 , 6F
2 去抓哪個tag被checked這方法不對,應該在eventlistener
10/06 16:16, 6F

10/06 16:17, 5年前 , 7F
直接看被點的是哪個(this)就好
10/06 16:17, 7F

10/06 16:19, 5年前 , 8F
至於你後面提到的computeResult,跟怎麼確定是哪個被按根本
10/06 16:19, 8F

10/06 16:21, 5年前 , 9F
無關,還是可以抓全部的再自己調整就好
10/06 16:21, 9F

10/07 14:28, 5年前 , 10F
1. div.btn-group 這整個在 boopstrap 是算一個元件
10/07 14:28, 10F

10/07 14:28, 5年前 , 11F
你把 p 放在裡面會影響這個元件(按鈕群組)
10/07 14:28, 11F

10/07 14:29, 5年前 , 12F
應該要把 p 跟 div.btn-group 放在同一層
10/07 14:29, 12F

10/07 14:29, 5年前 , 13F
外面你再用一個 div#player 包起來
10/07 14:29, 13F
文章代碼(AID): #1TcLtD_X (Web_Design)
文章代碼(AID): #1TcLtD_X (Web_Design)