質問編集履歴

2

※※1回目の回答をいただいたあと、kei344さんのサンプルを元に質問を編集させていただきました。 最初の質問では必要な範囲が記載しきれていませんでした。

2019/05/15 09:32

投稿

pecoro0321
pecoro0321

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,18 @@
1
1
  ### JavaScript / for文からbreakでうまく抜けられていない事案を解決したい
2
2
 
3
+ ※※1回目の回答をいただいたあと、kei344さんに作成いただいたサンプルを元に質問を編集させていただきました。
4
+
5
+ 最初の質問では必要な範囲が記載しきれていませんでした。
6
+
7
+
8
+
9
+ -------
10
+
3
11
  Javascript初級者です。
4
12
 
5
- Javascriptでモーダルウィンドウを実装しています。
13
+ Javascriptでモーダルウィンドウを実装しています。(#iconOpenをクリックすると#worksDetailWebを表示します)
14
+
15
+
6
16
 
7
17
  「work-web」というクラスが付与されたdivをdisplay:noneで非表示にし、
8
18
 
@@ -18,25 +28,29 @@
18
28
 
19
29
  ```HTML
20
30
 
31
+ <div id="iconOpen">iconOpen</div>
32
+
33
+
34
+
21
- <div id="worksDetailWeb">
35
+ <div id="worksDetailWeb" class="dispnone">
22
-
36
+
23
- <div id="iconClose"></div>
37
+ <div id="iconClose">iconClose</div>
24
-
38
+
25
- <div id="iconRight"></div>
39
+ <div id="iconRight">iconRight</div>
26
40
 
27
41
 
28
42
 
29
43
  <div id="wrapper">
30
44
 
31
- <div class="work-web current" id="div01"></div>
45
+ <div class="work-web current" id="div01">div01</div>
32
-
46
+
33
- <div class="work-web" id="div02"></div>
47
+ <div class="work-web" id="div02">div02</div>
34
-
48
+
35
- <div class="work-web" id="div03"></div>
49
+ <div class="work-web" id="div03">div03</div>
36
-
50
+
37
- <div class="work-web" id="div04"></div>
51
+ <div class="work-web" id="div04">div04</div>
38
-
52
+
39
- <div class="work-web" id="div05"></div>
53
+ <div class="work-web" id="div05">div05</div>
40
54
 
41
55
  </div>
42
56
 
@@ -44,7 +58,27 @@
44
58
 
45
59
  ```
46
60
 
47
-
61
+ ```CSS
62
+
63
+ #worksDetailWeb {
64
+
65
+ border: 1px solid #000;
66
+
67
+ }
68
+
69
+ .current {
70
+
71
+ color: red;
72
+
73
+ }
74
+
75
+ .dispnone {
76
+
77
+ display: none;
78
+
79
+ }
80
+
81
+ ```
48
82
 
49
83
 
50
84
 
@@ -52,64 +86,88 @@
52
86
 
53
87
 
54
88
 
55
- const worksDetailWeb = document.getElementById('worksDetailWeb')
89
+ const worksDetailWeb = document.getElementById('worksDetailWeb');
56
-
90
+
57
- const eachWebWorks = document.getElementsByClassName('work-web')
91
+ const eachWebWorks = document.getElementsByClassName('work-web');
58
-
92
+
59
- const iconRight = document.getElementById('iconRight')
93
+ const iconRight = document.getElementById('iconRight');
60
-
94
+
61
- const iconClose = document.getElementById('iconClose')
95
+ const iconClose = document.getElementById('iconClose');
96
+
62
-
97
+ const iconOpen = document.getElementById('iconOpen');
98
+
99
+
100
+
63
-
101
+ function worksDetail(){
64
-
102
+
65
- //#iconRightをクリック→currentクラスを削除して1つ次のdivにcurrentクラスを付与する。
103
+ //#iconRightをクリック→currentクラスを削除して1つ次のdivにcurrentクラスを付与する。
66
-
104
+
67
- iconRight.addEventListener('click', function (e) {
105
+ iconRight.addEventListener('click', function (e) {
68
-
106
+
69
- for (i = 0; i < eachWebWorks.length-1; i++) {
107
+ for (i = 0; i < eachWebWorks.length-1; i++) {
70
-
108
+
71
- let self = eachWebWorks[i]
109
+ let self = eachWebWorks[i];
72
-
110
+
73
- if (self.classList.contains('current')) {
111
+ if (self.classList.contains('current')) {
74
-
112
+
75
- self.classList.remove('current')
113
+ self.classList.remove('current');
76
-
114
+
77
- eachWebWorks[i + 1].classList.add('current')
115
+ eachWebWorks[i + 1].classList.add('current');
78
-
116
+
79
- break
117
+ break;
118
+
119
+ }
120
+
121
+ }
122
+
123
+ });
124
+
125
+
126
+
127
+ //#iconCloseをクリック→currentクラスを#div01に付与し直す。
128
+
129
+ iconClose.addEventListener('click', function (e) {
130
+
131
+ for (let eachWebWork of eachWebWorks) {
132
+
133
+ if (eachWebWork.classList.contains('current')) {
134
+
135
+ eachWebWork.classList.remove('current');
136
+
137
+ eachWebWorks[0].classList.add('current');
138
+
139
+ break;
140
+
141
+ }
142
+
143
+ }
144
+
145
+ worksDetailWeb.classList.add('dispnone');
146
+
147
+ });
148
+
149
+ }
150
+
151
+
152
+
153
+ //#iconOpenを開いたらモーダル部分を表示する
154
+
155
+ iconOpen.addEventListener('click', function (e) {
156
+
157
+ e.preventDefault();
158
+
159
+ if (worksDetailWeb.classList.contains('dispnone')) {
160
+
161
+ worksDetailWeb.classList.remove('dispnone');
162
+
163
+ worksDetail();
80
164
 
81
165
  }
82
166
 
83
- }
84
-
85
167
  })
86
168
 
87
169
 
88
170
 
89
- //#iconCloseをクリック→currentクラスを#div01に付与し直す。
90
-
91
- iconClose.addEventListener('click', function (e) {
92
-
93
- for (let eachWebWork of eachWebWorks) {
94
-
95
- if (eachWebWork.classList.contains('current')) {
96
-
97
- eachWebWork.classList.remove('current')
98
-
99
- eachWebWorks[0].classList.add('current')
100
-
101
- break
102
-
103
- }
104
-
105
- }
106
-
107
- worksDetailWeb.classList.add('dispnone')
108
-
109
- })
110
-
111
-
112
-
113
171
 
114
172
 
115
173
  ```

1

入力が重複して保存されてしまっていたので、不要な部分を削除しました。

2019/05/15 09:32

投稿

pecoro0321
pecoro0321

スコア10

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,14 @@
1
- ### JavaScript for文からbreakでうまく抜けられていない事案を解決したい
1
+ ### JavaScript / for文からbreakでうまく抜けられていない事案を解決したい
2
2
 
3
3
  Javascript初級者です。
4
4
 
5
5
  Javascriptでモーダルウィンドウを実装しています。
6
6
 
7
+ 「work-web」というクラスが付与されたdivをdisplay:noneで非表示にし、
8
+
9
+ 「current」というクラスがついたdivのみdisplay:blockで表示しています。
10
+
7
- work-web」というクラスが付与されたdivがいくつかあり、「#iconRight」を押すとひとつ次のdivに「current」クラスを付与して内容を切り替える動きを実装しようとしたところ、for文が意図どおりに動作しませんでした。
11
+ 「#iconRight」ボタンを押すとひとつ次のdivに「current」クラスを付与して内容を切り替える動きを実装しようとしたところ、for文が意図どおりに動作しませんでした。
8
12
 
9
13
 
10
14
 
@@ -14,21 +18,27 @@
14
18
 
15
19
  ```HTML
16
20
 
21
+ <div id="worksDetailWeb">
22
+
23
+ <div id="iconClose"></div>
24
+
25
+ <div id="iconRight"></div>
17
26
 
18
27
 
19
- <div class="icon-right" id="iconRight"></div>
20
28
 
21
- <div id="wrapper">
29
+ <div id="wrapper">
22
30
 
23
- <div class="work-web current" id="div01"></div>
31
+ <div class="work-web current" id="div01"></div>
24
32
 
25
- <div class="work-web" id="div02"></div>
33
+ <div class="work-web" id="div02"></div>
26
34
 
27
- <div class="work-web" id="div03"></div>
35
+ <div class="work-web" id="div03"></div>
28
36
 
29
- <div class="work-web" id="div04"></div>
37
+ <div class="work-web" id="div04"></div>
30
38
 
31
- <div class="work-web" id="div05"></div>
39
+ <div class="work-web" id="div05"></div>
40
+
41
+ </div>
32
42
 
33
43
  </div>
34
44
 
@@ -42,11 +52,17 @@
42
52
 
43
53
 
44
54
 
55
+ const worksDetailWeb = document.getElementById('worksDetailWeb')
56
+
45
57
  const eachWebWorks = document.getElementsByClassName('work-web')
46
58
 
47
59
  const iconRight = document.getElementById('iconRight')
48
60
 
61
+ const iconClose = document.getElementById('iconClose')
49
62
 
63
+
64
+
65
+ //#iconRightをクリック→currentクラスを削除して1つ次のdivにcurrentクラスを付与する。
50
66
 
51
67
  iconRight.addEventListener('click', function (e) {
52
68
 
@@ -70,31 +86,59 @@
70
86
 
71
87
 
72
88
 
89
+ //#iconCloseをクリック→currentクラスを#div01に付与し直す。
90
+
91
+ iconClose.addEventListener('click', function (e) {
92
+
93
+ for (let eachWebWork of eachWebWorks) {
94
+
95
+ if (eachWebWork.classList.contains('current')) {
96
+
97
+ eachWebWork.classList.remove('current')
98
+
99
+ eachWebWorks[0].classList.add('current')
100
+
101
+ break
102
+
103
+ }
104
+
105
+ }
106
+
107
+ worksDetailWeb.classList.add('dispnone')
108
+
109
+ })
110
+
111
+
112
+
73
113
 
74
114
 
75
115
  ```
76
116
 
77
117
  ### 発生している問題・エラーメッセージ
78
118
 
119
+
120
+
121
+ 1回目は#div01→#div02→#div03→#div04→#div05
122
+
79
- 一度モーダルを閉じ、再度開くと
123
+ と期待した通り動いたのですが、一度#iconCloseボタンでモーダルを閉じ、再度開くと
80
124
 
81
125
 
82
126
 
83
- 1回目はdiv01→div02→div03→div04→div05
127
+ 2回目は#div01→#div03→#div05
84
128
 
85
- 2回目はdiv01→div03→div05
129
+ 3回目は#div01→#div04#div05
86
130
 
87
- 3回目はdiv01→div04→div05
88
-
89
- 4回目以降はdiv01→div05
131
+ 4回目以降は#div01→#div05
90
132
 
91
133
 
92
134
 
93
135
  という動きになってしまいました。
94
136
 
95
- console.logで確認したところ、2回目以降は上のbreak文でfor文を抜けているときと抜けていないときが
96
137
 
138
+
97
- 上記順番で発生しいるようでした
139
+ break前の行にconsole.logを入れ確認したところ、
140
+
141
+ 表示されなかったdivの部分はbreakせずに次の処理に進んでしまっていました。
98
142
 
99
143
 
100
144
 
@@ -102,6 +146,6 @@
102
146
 
103
147
  ### 補足情報(FW/ツールのバージョンなど)
104
148
 
105
- 初めて質問させていただきます。
149
+ 初めて質問させていただきます。質問の仕方に不備などありましたら申し訳ありません。
106
150
 
107
- 該当箇所を抜き出て質問化たつもりでが、別のコードが原因の可能性がありましたらし
151
+ 何卒よろくお願い