teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

edit

2021/03/07 10:47

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -27,13 +27,13 @@
27
27
  currentTarget使ったやり方書いてなかった
28
28
  ```js
29
29
  let ans_current= null;
30
- $('.quiz_area').on('click', '.quiz_ans_area ul li', function(){
30
+ $('.quiz_area').on('click', '.quiz_ans_area ul li', function(e){
31
- ans_current = $(this);
31
+ ans_current = e.currentTarget;
32
32
  });
33
33
 
34
34
  $('.quiz_area').on('click', '.quiz_question_area ul li', function(){
35
35
  if(ans_current != null){
36
- $(this).css('background-color','orange');
36
+ $(ans_current).css('background-color','orange');
37
37
  ans_current= null;
38
38
  }
39
39
  });

2

edit

2021/03/07 10:47

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -8,6 +8,25 @@
8
8
  未検証ですが、こんな風にわけるとか
9
9
  ```js
10
10
  let ans_current= null;
11
+ $('.quiz_area').on('click', '.quiz_ans_area ul li', function(e){
12
+ ans_current = currentTarget.currentTarget;
13
+ });
14
+
15
+ $('.quiz_area').on('click', '.quiz_question_area ul li', function(){
16
+ if(ans_current != null){
17
+ $(ans_current ).css('background-color','orange');
18
+ ans_current= null;
19
+ }
20
+ });
21
+
22
+ ```
23
+
24
+ HTML構成次第で変わってくると思います。
25
+ 要素のインデックス番号なども取れるようにした方がいいかもしれない(data属性で紐づけるのもあり)
26
+
27
+ currentTarget使ったやり方書いてなかった
28
+ ```js
29
+ let ans_current= null;
11
30
  $('.quiz_area').on('click', '.quiz_ans_area ul li', function(){
12
31
  ans_current = $(this);
13
32
  });
@@ -19,7 +38,4 @@
19
38
  }
20
39
  });
21
40
 
22
- ```
41
+ ```
23
-
24
- HTML構成次第で変わってくると思います。
25
- 要素のインデックス番号なども取れるようにした方がいいかもしれない(data属性で紐づけるのもあり)

1

edit

2021/03/07 10:44

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  「thisを使ったとしても迷わず要素を操作できるHTML構成やロジック」を考えるべきと思います。場合によってはHTMLから見直すべきです。
5
5
 
6
- クリックの中にクリックがあるのも直感的ではないです。
6
+ クリックの中にクリックがあるのも実装としてよろしくないです。
7
7
 
8
8
  未検証ですが、こんな風にわけるとか
9
9
  ```js