回答編集履歴

2

再修正

2016/12/29 12:39

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -8,6 +8,10 @@
8
8
 
9
9
  可読性と保守性を向上してみました。
10
10
 
11
+ まとめられる処理はまとめるようにし、変数名や関数名をわかりやすくしましょう。
12
+
13
+ バグが発見しやすくなり、後々の修正が楽になりますよ。
14
+
11
15
  ```JavaScript
12
16
 
13
17
  $(function() {
@@ -22,9 +26,9 @@
22
26
 
23
27
  var opacity_transparent = 0;
24
28
 
25
- var item_parent = ".slide";
29
+ var item_wrapper = ".slide";
26
-
30
+
27
- var all_items = item_parent + " > .item";
31
+ var all_items = item_wrapper + " > .item";
28
32
 
29
33
  //変数を定義
30
34
 
@@ -42,234 +46,218 @@
42
46
 
43
47
 
44
48
 
49
+ function append_item_to_wrapper(item_index) {
50
+
51
+ $(item_html[item_index]).appendTo(item_wrapper).css("opacity", opacity_transparent);
52
+
53
+ }
54
+
55
+
56
+
45
- //のアイテムを出力する
57
+ //指定番号のアイテムを出力する
58
+
46
-
59
+ function show_indexed_item(index) {
60
+
61
+ current_item_index = index * 1;
62
+
63
+
64
+
65
+ $(all_items).animate({
66
+
67
+ "opacity" : opacity_transparent
68
+
69
+ }, animated_duration, function() {
70
+
71
+ $(this).remove();
72
+
73
+ });
74
+
75
+
76
+
77
+ paging_current();
78
+
79
+ append_item_to_wrapper(current_item_index);
80
+
81
+
82
+
83
+ $(all_items).animate({
84
+
85
+ "opacity" : opacity_opaque
86
+
87
+ }, animated_duration, function() {
88
+
89
+ set_wrapper_as_high_as($(this));
90
+
91
+ });
92
+
93
+ }
94
+
95
+
96
+
97
+ //次のアイテムをスライドさせる
98
+
47
- function show_item(is_previous) {
99
+ function slide_item(is_previous) {
48
-
100
+
49
- var next_item_index = current_item_index + (is_previous ? -1 : 1);
101
+ current_item_index += (is_previous ? -1 : 1);
50
-
51
-
52
-
102
+
103
+
104
+
53
- if (next_item_index < 0) {
105
+ if (current_item_index < 0) {
54
-
106
+
55
- next_item_index = last_item_index;
107
+ current_item_index = last_item_index;
56
-
108
+
57
- } else if (next_item_index > last_item_index) {
109
+ } else if (current_item_index > last_item_index) {
58
-
110
+
59
- next_item_index = 0;
111
+ current_item_index = 0;
60
112
 
61
113
  }
62
114
 
63
115
 
64
116
 
117
+ $(all_items).animate({
118
+
119
+ "left" : sliding_gap * (is_previous ? 1 : -1) + "px",
120
+
121
+ "opacity" : opacity_transparent
122
+
123
+ }, animated_duration, function() {
124
+
125
+ $(this).remove();
126
+
127
+ });
128
+
129
+
130
+
65
131
  paging_current();
66
132
 
67
-
68
-
69
- $(item_html[next_item_index])
70
-
71
- .appendTo(item_parent).addClass(is_previous ? "previous" : "next").css("opacity", opacity_transparent);
72
-
73
-
74
-
75
- current_item_index = next_item_index;
133
+ append_item_to_wrapper(current_item_index);
134
+
135
+
136
+
137
+ $(all_items).animate({
138
+
139
+ "left" : "0",
140
+
141
+ "opacity" : opacity_opaque
142
+
143
+ }, animated_duration, function() {
144
+
145
+ set_wrapper_as_high_as($(this));
146
+
147
+ });
148
+
149
+ };
150
+
151
+
152
+
153
+ //親要素を子要素と同じ高さにする
154
+
155
+ function set_wrapper_as_high_as(child) {
156
+
157
+ var height = child.outerHeight();
158
+
159
+ child.parent().css('height', height);
160
+
161
+ };
162
+
163
+
164
+
165
+ //ページングの現在位置を設定する
166
+
167
+ function paging_current() {
168
+
169
+ $("." + slide_paging + " > li").removeClass("current");
170
+
171
+ $("." + slide_paging + " > li." + slide_paging + "_" + current_item_index).addClass("current");
76
172
 
77
173
  }
78
174
 
79
175
 
80
176
 
177
+ //初期化
178
+
179
+ $(document).ready(function() {
180
+
181
+ //左右ボタンをHTMLで直接記述
182
+
183
+ //ページングを追加
184
+
185
+ // $(item_wrapper).append("<ul class='" + slide_paging + "'></ul>");
186
+
187
+
188
+
189
+ //html要素を取得・配列化
190
+
191
+ $(all_items).each(function(index) {
192
+
193
+ item_html[index] = '<div class="item">' + $(this).html() + '</div>';
194
+
195
+
196
+
81
- //指定の番号のアイテムを出力する
197
+ //ページングの番号もこときに生成
82
-
198
+
83
- function show_indexed_item(index) {
199
+ $("." + slide_paging).append("<li class='" + slide_paging + "_" + index + "'>" + "</li>");
84
-
200
+
201
+
202
+
85
- current_item_index = index * 1;
203
+ last_item_index++;
86
-
87
-
88
-
89
- $(all_items).animate({
204
+
90
-
205
+
206
+
91
- "opacity" : opacity_transparent
207
+ //ついでに各要素の高さを取得し、最大値をmax_heightに代入
92
-
208
+
93
- }, animated_duration, function() {
209
+ max_height = Math.max(max_height, $(this).innerHeight());
94
-
95
- $(this).remove();
210
+
96
-
97
- });
211
+ });
98
-
99
-
100
-
101
- $(item_html[current_item_index])
212
+
102
-
103
- .appendTo(item_parent).css("opacity", opacity_transparent);
213
+
104
-
105
-
106
-
107
- $(all_items).animate({
214
+
108
-
109
- "opacity" : opacity_opaque
215
+ //ページングの現在位置を設定する
110
-
111
- });
112
216
 
113
217
  paging_current();
114
218
 
115
- }
116
-
117
-
118
-
119
- //アイテムをスライドさせる
120
-
121
- function slide_item(is_previous) {
122
-
123
- $(all_items).animate({
124
-
125
- "left" : sliding_gap * (is_previous ? 1 : -1) + "px",
126
-
127
- "opacity" : opacity_transparent
128
-
129
- }, animated_duration, function() {
130
-
131
- $(this).remove();
132
-
133
- });
134
-
135
-
136
-
137
- show_item(is_previous);
138
-
139
-
140
-
141
- $(all_items + (is_previous ? ".previous" : ".next")).animate({
142
-
143
- "left" : "0",
144
-
145
- "opacity" : opacity_opaque
146
-
147
- }, animated_duration, function() {
148
-
149
- set_parent_as_high_as($(this));
150
-
151
- });
152
-
153
- };
154
-
155
-
156
-
157
- //親要素を子要素と同じ高さにする
158
-
159
- var set_parent_as_high_as = function(child) {
160
-
161
- var height = child.outerHeight();
162
-
163
- child.parent().css('height', height);
164
-
165
- };
166
-
167
-
168
-
169
- //ページングの現在位置を設定する
170
-
171
- function paging_current() {
172
-
173
- $("." + slide_paging + " > li").removeClass("current");
174
-
175
- $("." + slide_paging + " > li." + slide_paging + "_" + current_item_index).addClass("current");
176
-
177
- }
178
-
179
-
180
-
181
- //初期化
182
-
183
- $(document).ready(function() {
184
-
185
- //左右ボタンをHTMLで直接記述
186
-
187
- //ページングを追加
188
-
189
- // $(item_parent).append("<ul class='" + slide_paging + "'></ul>");
190
-
191
-
192
-
193
- //html要素を取得・配列化
194
-
195
- $(all_items).each(function(i) {
196
-
197
- item_html[i] = $(this).html();
198
-
199
- item_html[i] = '<div class="item">' + item_html[i] + '</div>';
200
-
201
-
202
-
203
- //ページングの番号もこのときに生成
204
-
205
-
206
-
207
- $("." + slide_paging).append("<li class='" + slide_paging + "_" + i + "'>" + "</li>");
208
-
209
- last_item_index++;
210
-
211
-
212
-
213
- //ついでに各要素の高さを取得し、最大値をmax_heightに代入
214
-
215
- var this_height = $(this).innerHeight();
216
-
217
- if (max_height < this_height) {
218
-
219
- max_height = this_height;
219
+ set_wrapper_as_high_as($(all_items + ":first"));
220
+
221
+
222
+
223
+ //スライドの1つ目以外を消去
224
+
225
+ $(all_items).not(":first").remove();
226
+
227
+
228
+
229
+ //クリックイベント
230
+
231
+ $(".slide_navi > .next").click(function() {
232
+
233
+ slide_item(false);
234
+
235
+ });
236
+
237
+
238
+
239
+ $(".slide_navi > .previous").click(function() {
240
+
241
+ slide_item(true);
242
+
243
+ });
244
+
245
+
246
+
247
+ $("." + slide_paging + " li").click(function() {
248
+
249
+ slide_paging_click = $(this).attr("class").match(/[0-9+]/);
250
+
251
+ slide_paging_click = String(slide_paging_click[0]);
252
+
253
+ if (slide_paging_click != current_item_index) {
254
+
255
+ show_indexed_item(slide_paging_click);
220
256
 
221
257
  }
222
258
 
223
259
  });
224
260
 
225
-
226
-
227
- //ページングの現在位置を設定する
228
-
229
- paging_current();
230
-
231
- set_parent_as_high_as($(all_items + ":first"));
232
-
233
-
234
-
235
- //スライドの1つ目以外を消去
236
-
237
- $(all_items).not(":first").remove();
238
-
239
-
240
-
241
- //クリックイベント
242
-
243
- $(".slide_navi > .next").click(function() {
244
-
245
- slide_item(false);
246
-
247
- });
248
-
249
-
250
-
251
- $(".slide_navi > .previous").click(function() {
252
-
253
- slide_item(true);
254
-
255
- });
256
-
257
-
258
-
259
- $("." + slide_paging + " li").click(function() {
260
-
261
- slide_paging_click = $(this).attr("class").match(/[0-9+]/);
262
-
263
- slide_paging_click = String(slide_paging_click[0]);
264
-
265
- if (slide_paging_click != current_item_index) {
266
-
267
- show_indexed_item(slide_paging_click);
268
-
269
- }
270
-
271
- });
272
-
273
261
  });
274
262
 
275
263
  });

1

バグ修正、可読性と保守性を向上

2016/12/29 12:39

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -2,80 +2,276 @@
2
2
 
3
3
 
4
4
 
5
+ 修正
6
+
7
+
8
+
9
+ 可読性と保守性を向上してみました。
10
+
5
11
  ```JavaScript
6
12
 
7
- var item_slide_nxt = function () {
8
-
9
- $(item).animate({
10
-
11
- "left":"-30px",
12
-
13
- "opacity":"0"
14
-
15
- },500,function(){
16
-
17
- $(this).remove();
18
-
19
- });
20
-
21
- next_show();
22
-
23
- $(item + ".next").animate({
24
-
25
- "left":"0",
26
-
27
- "opacity":"1"
28
-
29
- },500,function(){
30
-
31
- set_parent_as_high_as($(this));
32
-
33
- });
34
-
35
- };
36
-
37
-
38
-
39
- var item_slide_prv = function() {
40
-
41
- $(item).animate({
42
-
43
- "left":"30px",
44
-
45
- "opacity":"0"
46
-
47
- },500,function(){
48
-
49
- $(this).remove();
50
-
51
- });
52
-
53
- preview_show();
54
-
55
- $(item + ".preview").animate({
56
-
57
- "left":"0",
58
-
59
- "opacity":"1"
60
-
61
- },500,function(){
62
-
63
- set_parent_as_high_as($(this));
64
-
65
- });
66
-
67
- };
68
-
69
-
70
-
71
- //親要素を子要素と同じ高さにする
72
-
73
- var set_parent_as_high_as = function(child) {
74
-
75
- var height = child.height();
76
-
77
- child.parent().parent().css('height', height);
78
-
79
- };
13
+ $(function() {
14
+
15
+ //定数を定義
16
+
17
+ var animated_duration = 500; // milliseconds
18
+
19
+ var sliding_gap = 30; // px
20
+
21
+ var opacity_opaque = 1;
22
+
23
+ var opacity_transparent = 0;
24
+
25
+ var item_parent = ".slide";
26
+
27
+ var all_items = item_parent + " > .item";
28
+
29
+ //変数を定義
30
+
31
+ var last_item_index = -1;
32
+
33
+ var item_html = [];
34
+
35
+ var current_item_index = 0, max_height = 0;
36
+
37
+ //ページング関連の変数
38
+
39
+ var slide_paging = "slide_paging";
40
+
41
+ var slide_paging_click;
42
+
43
+
44
+
45
+ //次のアイテムを出力する
46
+
47
+ function show_item(is_previous) {
48
+
49
+ var next_item_index = current_item_index + (is_previous ? -1 : 1);
50
+
51
+
52
+
53
+ if (next_item_index < 0) {
54
+
55
+ next_item_index = last_item_index;
56
+
57
+ } else if (next_item_index > last_item_index) {
58
+
59
+ next_item_index = 0;
60
+
61
+ }
62
+
63
+
64
+
65
+ paging_current();
66
+
67
+
68
+
69
+ $(item_html[next_item_index])
70
+
71
+ .appendTo(item_parent).addClass(is_previous ? "previous" : "next").css("opacity", opacity_transparent);
72
+
73
+
74
+
75
+ current_item_index = next_item_index;
76
+
77
+ }
78
+
79
+
80
+
81
+ //指定の番号のアイテムを出力する
82
+
83
+ function show_indexed_item(index) {
84
+
85
+ current_item_index = index * 1;
86
+
87
+
88
+
89
+ $(all_items).animate({
90
+
91
+ "opacity" : opacity_transparent
92
+
93
+ }, animated_duration, function() {
94
+
95
+ $(this).remove();
96
+
97
+ });
98
+
99
+
100
+
101
+ $(item_html[current_item_index])
102
+
103
+ .appendTo(item_parent).css("opacity", opacity_transparent);
104
+
105
+
106
+
107
+ $(all_items).animate({
108
+
109
+ "opacity" : opacity_opaque
110
+
111
+ });
112
+
113
+ paging_current();
114
+
115
+ }
116
+
117
+
118
+
119
+ //アイテムをスライドさせる
120
+
121
+ function slide_item(is_previous) {
122
+
123
+ $(all_items).animate({
124
+
125
+ "left" : sliding_gap * (is_previous ? 1 : -1) + "px",
126
+
127
+ "opacity" : opacity_transparent
128
+
129
+ }, animated_duration, function() {
130
+
131
+ $(this).remove();
132
+
133
+ });
134
+
135
+
136
+
137
+ show_item(is_previous);
138
+
139
+
140
+
141
+ $(all_items + (is_previous ? ".previous" : ".next")).animate({
142
+
143
+ "left" : "0",
144
+
145
+ "opacity" : opacity_opaque
146
+
147
+ }, animated_duration, function() {
148
+
149
+ set_parent_as_high_as($(this));
150
+
151
+ });
152
+
153
+ };
154
+
155
+
156
+
157
+ //親要素を子要素と同じ高さにする
158
+
159
+ var set_parent_as_high_as = function(child) {
160
+
161
+ var height = child.outerHeight();
162
+
163
+ child.parent().css('height', height);
164
+
165
+ };
166
+
167
+
168
+
169
+ //ページングの現在位置を設定する
170
+
171
+ function paging_current() {
172
+
173
+ $("." + slide_paging + " > li").removeClass("current");
174
+
175
+ $("." + slide_paging + " > li." + slide_paging + "_" + current_item_index).addClass("current");
176
+
177
+ }
178
+
179
+
180
+
181
+ //初期化
182
+
183
+ $(document).ready(function() {
184
+
185
+ //左右ボタンをHTMLで直接記述
186
+
187
+ //ページングを追加
188
+
189
+ // $(item_parent).append("<ul class='" + slide_paging + "'></ul>");
190
+
191
+
192
+
193
+ //html要素を取得・配列化
194
+
195
+ $(all_items).each(function(i) {
196
+
197
+ item_html[i] = $(this).html();
198
+
199
+ item_html[i] = '<div class="item">' + item_html[i] + '</div>';
200
+
201
+
202
+
203
+ //ページングの番号もこのときに生成
204
+
205
+
206
+
207
+ $("." + slide_paging).append("<li class='" + slide_paging + "_" + i + "'>" + "</li>");
208
+
209
+ last_item_index++;
210
+
211
+
212
+
213
+ //ついでに各要素の高さを取得し、最大値をmax_heightに代入
214
+
215
+ var this_height = $(this).innerHeight();
216
+
217
+ if (max_height < this_height) {
218
+
219
+ max_height = this_height;
220
+
221
+ }
222
+
223
+ });
224
+
225
+
226
+
227
+ //ページングの現在位置を設定する
228
+
229
+ paging_current();
230
+
231
+ set_parent_as_high_as($(all_items + ":first"));
232
+
233
+
234
+
235
+ //スライドの1つ目以外を消去
236
+
237
+ $(all_items).not(":first").remove();
238
+
239
+
240
+
241
+ //クリックイベント
242
+
243
+ $(".slide_navi > .next").click(function() {
244
+
245
+ slide_item(false);
246
+
247
+ });
248
+
249
+
250
+
251
+ $(".slide_navi > .previous").click(function() {
252
+
253
+ slide_item(true);
254
+
255
+ });
256
+
257
+
258
+
259
+ $("." + slide_paging + " li").click(function() {
260
+
261
+ slide_paging_click = $(this).attr("class").match(/[0-9+]/);
262
+
263
+ slide_paging_click = String(slide_paging_click[0]);
264
+
265
+ if (slide_paging_click != current_item_index) {
266
+
267
+ show_indexed_item(slide_paging_click);
268
+
269
+ }
270
+
271
+ });
272
+
273
+ });
274
+
275
+ });
80
276
 
81
277
  ```