回答編集履歴

1

実装例を追加

2018/05/26 23:46

投稿

euledge
euledge

スコア2404

test CHANGED
@@ -1 +1,115 @@
1
1
  全体表示したものに対して、行単位に style="display=none" の制御をしてあげればよいのかと思います。
2
+
3
+
4
+
5
+ 実装例ということで、書いてみました。
6
+
7
+ ``` html
8
+
9
+ <body>
10
+
11
+ <div id="settings">
12
+
13
+ <!-- currentidには 1,2,3などが入っている想定 -->
14
+
15
+ <div class="screen" id="1">
16
+
17
+ ああああああ
18
+
19
+ <div class="background"></div>
20
+
21
+ <div class="chartype"></div>
22
+
23
+ <div class="dialogue-frame"></div>
24
+
25
+ </div>
26
+
27
+
28
+
29
+ <div class="screen" id="2">
30
+
31
+ いいいいいいい
32
+
33
+ <div class="background"></div>
34
+
35
+ <div class="chartype"></div>
36
+
37
+ <div class="dialogue-frame"></div>
38
+
39
+ </div>
40
+
41
+
42
+
43
+ <div class="screen" id="3">
44
+
45
+ ううううううう
46
+
47
+ <div class="background"></div>
48
+
49
+ <div class="chartype"></div>
50
+
51
+ <div class="dialogue-frame"></div>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ </body>
58
+
59
+ ```
60
+
61
+
62
+
63
+ ``` js
64
+
65
+ let current_screen_no = 1;
66
+
67
+ let screens = document.getElementsByClassName("screen");
68
+
69
+ let screen_num = screens.length;
70
+
71
+ display_screen(1);
72
+
73
+
74
+
75
+ // スクリーン切り替えの処理
76
+
77
+ function display_screen(screen_no) {
78
+
79
+ Array.prototype.forEach.call(screens, function(screen){
80
+
81
+ if (Number(screen.id) === screen_no) {
82
+
83
+ screen.style.display = "block";
84
+
85
+ } else {
86
+
87
+ screen.style.display = "none";
88
+
89
+ }
90
+
91
+ });
92
+
93
+ current_screen_no = current_screen_no + 1;
94
+
95
+ }
96
+
97
+
98
+
99
+ document.body.addEventListener('click',function(mEvent){
100
+
101
+ if (current_screen_no <= screen_num){
102
+
103
+ display_screen(current_screen_no);
104
+
105
+ }
106
+
107
+ },true);
108
+
109
+ ```
110
+
111
+
112
+
113
+ 【動くサンプル】
114
+
115
+ [https://jsfiddle.net/euledge/4r5cft7d/](https://jsfiddle.net/euledge/4r5cft7d/)