回答編集履歴

2

htmlがおかしい部分を修正

2018/05/14 04:13

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -8,19 +8,17 @@
8
8
 
9
9
  <p>おはようございます</p>
10
10
 
11
- <button type="button" id="push01" class="btn" data-box-target="box01"/>
11
+ <button type="button" id="push01" class="btn" data-box-target="box01" >
12
12
 
13
13
  次へ
14
14
 
15
15
  </button>
16
16
 
17
- </div>
18
-
19
17
  <div id="box01" class="box">
20
18
 
21
19
  <p>こんにちは</p>
22
20
 
23
- <button type="button" id="push02" class="btn" data-data-box-target="box02"/>
21
+ <button type="button" id="push02" class="btn" data-box-target="box02" >
24
22
 
25
23
  次へ
26
24
 
@@ -38,13 +36,13 @@
38
36
 
39
37
  ```js
40
38
 
41
- $(function(){
39
+ $(function(){
42
40
 
43
41
  $(".box").hide();
44
42
 
45
43
  $(".btn").one("click", function () {
46
44
 
47
- $("#"+$(this).data("data-box-target")).toggle();
45
+ $("#"+$(this).data("box-target")).toggle();
48
46
 
49
47
  });
50
48
 
@@ -57,3 +55,13 @@
57
55
  - [thisについて](http://www.jquerystudy.info/tutorial/basic/this2.html)
58
56
 
59
57
  - [HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法](http://dresscording.com/blog/html5/custom_data_attribute.html)
58
+
59
+
60
+
61
+ 追記:
62
+
63
+ そういえば幾つかhtmlがおかしい部分がありますので修正しました。
64
+
65
+ 開始のdivがないのに</div>で閉じている。→ 開始が分からないので閉じdivを削除
66
+
67
+ <button /></button>としてしまっている。→ <button></button> に修正

1

修正

2018/05/14 04:13

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -1,6 +1,6 @@
1
1
  必ずリンクしているというルールなのであればdata属性などを利用してリンクさせるのもありです。
2
2
 
3
- あとは同じ処理をしているエレメントには同じclassを与えてthisなどで対応。
3
+ あとは同じ処理をしているエレメントには同じclassを与えてthisで対応。
4
4
 
5
5
 
6
6
 
@@ -48,8 +48,6 @@
48
48
 
49
49
  });
50
50
 
51
-
52
-
53
51
  });
54
52
 
55
53
  ```