質問編集履歴

1

進歩状況を反映

2015/09/19 13:25

投稿

flat
flat

スコア617

test CHANGED
File without changes
test CHANGED
@@ -328,7 +328,7 @@
328
328
 
329
329
 
330
330
 
331
- JavaScriptによる実装の途中
331
+ JavaScriptによる実装の途中(随時更新)
332
332
 
333
333
  表示・非表示はjQueryとは違って`.hidden { display: none }`というクラスを使って行う予定
334
334
 
@@ -408,17 +408,107 @@
408
408
 
409
409
 
410
410
 
411
- // ページ送り
411
+ // 最後のページ
412
412
 
413
413
  var last = Math.ceil( length / split );
414
414
 
415
+ // 現在のページ
416
+
415
417
  var current = 1;
416
418
 
417
- 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';
418
-
419
-
420
-
421
-
419
+
420
+
421
+ // ページ送り用のノードを作成
422
+
423
+ var pagenations = document.createDocumentFragment();
424
+
425
+
426
+
427
+ // ページ送りをノードに追加
428
+
429
+ var pagenation = document.createElement( 'div' );
430
+
431
+ pagenation.className = 'list-pagenation';
432
+
433
+ pagenations.appendChild( pagenation );
434
+
435
+
436
+
437
+ // 前へ戻るボタンをページ送りに追加
438
+
439
+ var page_prev = document.createElement( 'span' );
440
+
441
+ page_prev.className = 'list-prev';
442
+
443
+ page_prev.appendChild( document.createTextNode( 'Prev' ) );
444
+
445
+ pagenation.appendChild( page_prev );
446
+
447
+
448
+
449
+ // 次へ進むボタンをページ送りに追加
450
+
451
+ var page_next = document.createElement( 'span' );
452
+
453
+ page_next.className = 'list-next';
454
+
455
+ page_next.appendChild( document.createTextNode( 'Next' ) );
456
+
457
+ pagenation.appendChild( page_next );
458
+
459
+
460
+
461
+ // カウンターをノードに追加
462
+
463
+ var page_counter = document.createElement( 'span' );
464
+
465
+ page_counter.className = 'counter';
466
+
467
+ pagenations.appendChild( page_counter );
468
+
469
+
470
+
471
+ // 現在のページをカウンターに追加
472
+
473
+ var page_current = document.createElement( 'span' );
474
+
475
+ page_current.className = 'current';
476
+
477
+ page_current.appendChild( document.createTextNode( current ) );
478
+
479
+ page_counter.appendChild( page_current );
480
+
481
+
482
+
483
+ // ページ表示の区切りをカウンターに追加
484
+
485
+ var partition = document.createTextNode( '/' );
486
+
487
+ page_counter.appendChild( partition );
488
+
489
+
490
+
491
+ // 最後のページをカウンターに追加
492
+
493
+ var page_last = document.createElement( 'span' );
494
+
495
+ page_last.className = 'last';
496
+
497
+ page_last.appendChild( document.createTextNode( last ) );
498
+
499
+ page_counter.appendChild( page_last );
500
+
501
+
502
+
503
+ var list_parent = list[0].parentNode;
504
+
505
+ list_parent.insertBefore( pagenations, list[0] );
506
+
507
+
508
+
509
+ // 課題1: ページ送りを各リストの直前に挿入する
510
+
511
+ // 課題2: 変数 last の値を各リストと連動した形で反映させる
422
512
 
423
513
  }
424
514