作者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/cn.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