作者ekids1234 (∵:☆星痕╭☆)
看板Web_Design
標題[問題] bootstrap 改 class 過慢，和排版小問題
時間Sun Oct 6 11:21:44 2019
各位好，小弟做興趣的，不夠扎實
目前遇到兩個問題
先放一下範例 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://webptt.com/m.aspx?n=bbs/Web_Design/M.1570332109.A.FE1.html
1F：推 z0991100238: updateValueDescription外面加個setTimeout 10/06 11:33
的確是個很簡單易瞭的方法，如果有其他方法各位也能討論看看~
剛剛測 500ms 勉強可
※ 編輯: ekids1234 (106.107.244.180 臺灣), 10/06/2019 11:47:50
2F：→ z0991100238: 我剛剛測試不用加ms，那個是nexttick的問題啊... 10/06 12:33
3F：→ z0991100238: 另外也可以用setImmediate處理 10/06 12:34
4F：推 nick8195: 1. player2沒有btn-group這個class提供的inline-flex 10/06 13:20
5F：→ nick8195: 父層沒有flex, 子層的p就保留原先的block特性, 佔滿空間 10/06 13:21
6F：→ ssccg: 2 去抓哪個tag被checked這方法不對，應該在eventlistener 10/06 16:16
7F：→ ssccg: 直接看被點的是哪個(this)就好 10/06 16:17
8F：→ ssccg: 至於你後面提到的computeResult，跟怎麼確定是哪個被按根本 10/06 16:19
9F：→ ssccg: 無關，還是可以抓全部的再自己調整就好 10/06 16:21
10F：推 tino1991: 1. div.btn-group 這整個在 boopstrap 是算一個元件 10/07 14:28
11F：→ tino1991: 你把 p 放在裡面會影響這個元件(按鈕群組) 10/07 14:28
12F：→ tino1991: 應該要把 p 跟 div.btn-group 放在同一層 10/07 14:29
13F：→ tino1991: 外面你再用一個 div#player 包起來 10/07 14:29