質問編集履歴
1
進歩状況を反映
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
});
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
JavaScriptによる実装の途中
|
|
166
|
+
JavaScriptによる実装の途中(随時更新)
|
|
167
167
|
表示・非表示はjQueryとは違って`.hidden { display: none }`というクラスを使って行う予定
|
|
168
168
|
```JavaScript
|
|
169
169
|
// Pure JavaScript
|
|
@@ -203,12 +203,57 @@
|
|
|
203
203
|
i++;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
// ページ
|
|
206
|
+
// 最後のページ
|
|
207
207
|
var last = Math.ceil( length / split );
|
|
208
|
+
// 現在のページ
|
|
208
209
|
var current = 1;
|
|
209
|
-
var pagenation = '<div class="list-pagenation">\n<span class="list-prev">prev</span>\n<span class="list-next">next</span>\n<span class="counter"><span class="current">' + current + '</span>/<span class="last">' + last + '</span></span>\n</div>\n';
|
|
210
210
|
|
|
211
|
+
// ページ送り用のノードを作成
|
|
212
|
+
var pagenations = document.createDocumentFragment();
|
|
211
213
|
|
|
214
|
+
// ページ送りをノードに追加
|
|
215
|
+
var pagenation = document.createElement( 'div' );
|
|
216
|
+
pagenation.className = 'list-pagenation';
|
|
217
|
+
pagenations.appendChild( pagenation );
|
|
218
|
+
|
|
219
|
+
// 前へ戻るボタンをページ送りに追加
|
|
220
|
+
var page_prev = document.createElement( 'span' );
|
|
221
|
+
page_prev.className = 'list-prev';
|
|
222
|
+
page_prev.appendChild( document.createTextNode( 'Prev' ) );
|
|
223
|
+
pagenation.appendChild( page_prev );
|
|
224
|
+
|
|
225
|
+
// 次へ進むボタンをページ送りに追加
|
|
226
|
+
var page_next = document.createElement( 'span' );
|
|
227
|
+
page_next.className = 'list-next';
|
|
228
|
+
page_next.appendChild( document.createTextNode( 'Next' ) );
|
|
229
|
+
pagenation.appendChild( page_next );
|
|
230
|
+
|
|
231
|
+
// カウンターをノードに追加
|
|
232
|
+
var page_counter = document.createElement( 'span' );
|
|
233
|
+
page_counter.className = 'counter';
|
|
234
|
+
pagenations.appendChild( page_counter );
|
|
235
|
+
|
|
236
|
+
// 現在のページをカウンターに追加
|
|
237
|
+
var page_current = document.createElement( 'span' );
|
|
238
|
+
page_current.className = 'current';
|
|
239
|
+
page_current.appendChild( document.createTextNode( current ) );
|
|
240
|
+
page_counter.appendChild( page_current );
|
|
241
|
+
|
|
242
|
+
// ページ表示の区切りをカウンターに追加
|
|
243
|
+
var partition = document.createTextNode( '/' );
|
|
244
|
+
page_counter.appendChild( partition );
|
|
245
|
+
|
|
246
|
+
// 最後のページをカウンターに追加
|
|
247
|
+
var page_last = document.createElement( 'span' );
|
|
248
|
+
page_last.className = 'last';
|
|
249
|
+
page_last.appendChild( document.createTextNode( last ) );
|
|
250
|
+
page_counter.appendChild( page_last );
|
|
251
|
+
|
|
252
|
+
var list_parent = list[0].parentNode;
|
|
253
|
+
list_parent.insertBefore( pagenations, list[0] );
|
|
254
|
+
|
|
255
|
+
// 課題1: ページ送りを各リストの直前に挿入する
|
|
256
|
+
// 課題2: 変数 last の値を各リストと連動した形で反映させる
|
|
212
257
|
}
|
|
213
258
|
|
|
214
259
|
document.addEventListener( 'DOMContentLoaded', function () {
|