回答編集履歴

4

かな

2017/05/01 06:32

投稿

退会済みユーザー
test CHANGED
@@ -62,4 +62,4 @@
62
62
 
63
63
  すみません。jQueryで動作検証したため普通のhtmlのイベントだとthisがspanに紐づかないということに気づきませんでした。
64
64
 
65
- eventオブジェクトを使う方法で直しても良いのですが、楽な方法でなおしました。動作確認できているのでご参考にしてもらえレバと思います。
65
+ eventオブジェクトを使う方法で直しても良いのですが、楽な方法でなおしました。動作確認できているのでご参考にしてもらえればと思います。

3

コード修正

2017/05/01 06:32

投稿

退会済みユーザー
test CHANGED
@@ -12,26 +12,54 @@
12
12
 
13
13
  ```javascript
14
14
 
15
- function check() {
15
+ function check(obj) {
16
16
 
17
- this.classList.remove("kuro");
17
+ obj.classList.remove("hide");
18
18
 
19
- this.onclick = uncheck;
19
+ obj.onclick = new Function("uncheck(this)");
20
20
 
21
21
  }
22
22
 
23
- function uncheck() {
23
+ function uncheck(obj) {
24
24
 
25
- this.classList.add("kuro");
25
+ obj.classList.add("hide");
26
26
 
27
- this.onclick = check;
27
+ obj.onclick = new Function("check(this)");
28
28
 
29
29
  }
30
30
 
31
31
  ```
32
32
 
33
+
34
+
35
+ ```html
36
+
33
- としてhtmlのid="kuro01"をclass="kuro"、onclick=checkcssのセレクタを#kuro~から.kuroを一つに変えるだけで動くと思います。#siro~は全く必要ありません。
37
+ <span onclick="check(this)" class="kuro hide">〜〜〜〜</span>
38
+
39
+ ```
40
+
41
+
42
+
43
+ ```css
44
+
45
+ .kuro {cursor: pointer;}
46
+
47
+ .kuro.hide{background-color: black;}
48
+
49
+ ```
34
50
 
35
51
 
36
52
 
37
53
  もし今後もWEBページを作る仕事をする必要があり、ちゃんとWEBページの作り方を勉強したことないのであれば一度ちゃんと勉強されてから作ったほうが書いてるときに大変にならずよいと思います。
54
+
55
+
56
+
57
+
58
+
59
+ 追記
60
+
61
+
62
+
63
+ すみません。jQueryで動作検証したため普通のhtmlのイベントだとthisがspanに紐づかないということに気づきませんでした。
64
+
65
+ eventオブジェクトを使う方法で直しても良いのですが、楽な方法でなおしました。動作確認できているのでご参考にしてもらえレバと思います。

2

typo

2017/05/01 06:32

投稿

退会済みユーザー
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  this.classList.remove("kuro");
18
18
 
19
- element.onclick = uncheck;
19
+ this.onclick = uncheck;
20
20
 
21
21
  }
22
22
 

1

情報欠落修正

2017/04/16 08:17

投稿

退会済みユーザー
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  ```
32
32
 
33
- htmlのid="kuro01"をclass="kuro"、cssのセレクタを#kuro~から.kuroを一つに変えるだけで動くと思います。#siro~は全く必要ありません。
33
+ としてhtmlのid="kuro01"をclass="kuro"、onclick=check、cssのセレクタを#kuro~から.kuroを一つに変えるだけで動くと思います。#siro~は全く必要ありません。
34
34
 
35
35
 
36
36