URLの一部を取得し、アーカイブ内の要素の表示・非表示を切り変えたい。
アーカイブエリアをincludeし、URLによって記事ページのアーカイブエリアの表示を出し分けしたいと考えています。
アーカイブの1つずつに日付をclass名としています。( <li class="1811"> )
http://○○○○○.com/○○○/○○○/**1901**/
上記URLの「1901」が日付となっており、末尾の数値を取得し、アーカイブの表示を操作したいです。
アーカイブエリアは4つのカテゴリーとなっており、
・各カテゴリーごとに現在の記事より直近で古いアーカイブが1件表示
・URL末尾と一致するclassがある場合はこれを表示する
・URL末尾より古いものがない場合、カテゴリー内で一番古いアーカイブを表示
このような質問でよいかわからず、至らない点もあるかと思いますが、よろしくお願いします。
###追記
わかりづらく申し訳ありません。
補足です。
困っているのはjQueryに関してとなります。
//配列の型を数値に変更 までは問題がないのですが、
//各カテゴリーアーカイブ表示の切り替え からの処理に関して
カテゴリーごとにeachで処理を使いまわしたいと考えているのですが、
「URLで取得した数値」と「liに付与されているclass」を取得しif文で条件分岐を想定しています。
現状の//各カテゴリーアーカイブ表示の切り替え の記述ですと、
http://○○○○○.com/○○○/○○○/**1901**/ の場合、
下記のようになってほしいのですが、
HTML
1 2<div class="archive"> 3 <h3>アーカイブ見出し</h3> 4 <div class="archiveBox clearfix"> 5 <ul class="archiveBox_item_box01"> 6 <li class="1811 active"></li> 7 <li class="1807"></li> 8 <li class="1804"></li> 9 <li class="1802"></li> 10 </ul> 11 <ul class="archiveBox_item_box02"> 12 <li class="1902"></li> 13 <li class="1810 active"></li> 14 <li class="1806"></li> 15 <li class="1803"></li> 16 <li class="1712"></li> 17 </ul> 18 <ul class="archiveBox_item_box03"> 19 <li class="1812 active"></li> 20 <li class="1808"></li> 21 </ul> 22 <ul class="archiveBox_item_box04"> 23 <li class="1901 active"></li> 24 <li class="1809"></li> 25 <li class="1805"></li> 26 <li class="1801"></li> 27 </ul> 28 </div> 29</div> 30
となってほしいのですが、現状は下記のようになってしまいます。
HTML
1 2<div class="archive"> 3 <h3>アーカイブ見出し</h3> 4 <div class="archiveBox clearfix"> 5 <ul class="archiveBox_item_box01"> 6 <li class="1811"></li> 7 <li class="1807"></li> 8 <li class="1804"></li> 9 <li class="1802"></li> 10 </ul> 11 <ul class="archiveBox_item_box02"> 12 <li class="1902"></li> 13 <li class="1810"></li> 14 <li class="1806"></li> 15 <li class="1803"></li> 16 <li class="1712"></li> 17 </ul> 18 <ul class="archiveBox_item_box03"> 19 <li class="1812"></li> 20 <li class="1808"></li> 21 </ul> 22 <ul class="archiveBox_item_box04"> 23 <li class="1901 active"></li> 24 <li class="1809"></li> 25 <li class="1805"></li> 26 <li class="1801"></li> 27 </ul> 28 </div> 29</div> 30
また、http://○○○○○.com/○○○/○○○/**1806**/ の場合、
HTML
1 2<div class="archive"> 3 <h3>アーカイブ見出し</h3> 4 <div class="archiveBox clearfix"> 5 <ul class="archiveBox_item_box01"> 6 <li class="1811"></li> 7 <li class="1807"></li> 8 <li class="1804"></li> 9 <li class="1802"></li> 10 </ul> 11 <ul class="archiveBox_item_box02"> 12 <li class="1902"></li> 13 <li class="1810"></li> 14 <li class="1806 active"></li> 15 <li class="1803"></li> 16 <li class="1712 active"></li> 17 </ul> 18 <ul class="archiveBox_item_box03"> 19 <li class="1812"></li> 20 <li class="1808"></li> 21 </ul> 22 <ul class="archiveBox_item_box04"> 23 <li class="1901"></li> 24 <li class="1809"></li> 25 <li class="1805"></li> 26 <li class="1801"></li> 27 </ul> 28 </div> 29</div> 30
エラーはなく、ページごとに意図はしていませんが処理はされているようです。
eachの使い方に問題があるのか、if文に問題があるのかわからない状況です。
発生している問題・エラーメッセージ
エラーはでていません。
該当のソースコード
HTML
1 2<div class="archive"> 3 <h3>アーカイブ見出し</h3> 4 <div class="archiveBox clearfix"> 5 6 <ul class="archiveBox_item_box01"> 7 <li class="1811"> 8 9 </li> 10 <li class="1807"> 11 12 </li> 13 <li class="1804"> 14 15 </li> 16 <li class="1802"> 17 18 </li> 19 </ul> 20 21 <ul class="archiveBox_item_box02"> 22 <li class="1902"> 23 24 </li> 25 <li class="1810"> 26 27 </li> 28 <li class="1806"> 29 30 </li> 31 <li class="1803"> 32 33 </li> 34 <li class="1712"> 35 36 </li> 37 </ul> 38 39 <ul class="archiveBox_item_box03"> 40 <li class="1812"> 41 42 </li> 43 <li class="1808"> 44 45 </li> 46 </ul> 47 48 <ul class="archiveBox_item_box04"> 49 <li class="1901"> 50 51 </li> 52 <li class="1809"> 53 54 </li> 55 <li class="1805"> 56 57 </li> 58 <li class="1801"> 59 60 </li> 61 </ul> 62 </div> 63</div> 64
jQuery
1 2 3$(function() { 4 5// URLの取得 6var $dir = location.href.split("/"); 7var $dir2 = $dir[$dir.length -2]; 8var $dir3 = Number( $dir2 ); 9 10// li をすべて取得する 11var box01 = $('.archiveBox_item_box01'); 12var box02 = $('.archiveBox_item_box02'); 13var box03 = $('.archiveBox_item_box03'); 14var box04 = $('.archiveBox_item_box04'); 15var item_box01 = box01.find('li'); 16var item_box02 = box02.find('li'); 17var item_box03 = box03.find('li'); 18var item_box04 = box04.find('li'); 19 20// li の個数分ループし、配列に格納する 21var item_box01Array = []; 22var item_box02Array = []; 23var item_box03Array = []; 24var item_box04Array = []; 25item_box01.each(function(){ 26 var class_box01 = $(this).attr('class'); 27 item_box01Array.push(class_box01); 28}); 29item_box02.each(function(){ 30 var class_box02 = $(this).attr('class'); 31 item_box02Array.push(class_box02); 32}); 33item_box03.each(function(){ 34 var class_box03 = $(this).attr('class'); 35 item_box03Array.push(class_box03); 36}); 37item_box04.each(function(){ 38 var class_box04 = $(this).attr('class'); 39 item_box04Array.push(class_box04); 40}); 41 42//配列の型を数値に変更 43var item_box01Finish = item_box01Array.map(function (element) { return Number(element); }); 44var item_box02Finish = item_box02Array.map(function (element) { return Number(element); }); 45var item_box03Finish = item_box03Array.map(function (element) { return Number(element); }); 46var item_box04Finish = item_box04Array.map(function (element) { return Number(element); }); 47 48//各カテゴリーアーカイブ表示の切り替え 49item_box01.each(function(){ 50 var class_box01 = $(this).attr('class'); 51 var num_box01 = Number(class_box01); 52 if($dir3 = num_box01) { 53 $('.archiveBox_item_box01 ').children("'."+$dir2+"'").addClass('active'); 54 } else if($dir3 > num_box01) { 55 $('.archiveBox_item_box01 ').children("'."+$dir2+"'").addClass('active'); 56 } else { 57 var minValue = Math.min.apply(null, item_box01Array); 58 $('.archiveBox_item_box01 ').children("'."+minValue+"'").addClass('active'); 59 } 60}); 61item_box02.each(function(){ 62 var class_box02 = $(this).attr('class'); 63 var num_box02 = Number(class_box02); 64 if($dir3 = num_box02) { 65 $('.archiveBox_item_box02 ').children("'."+$dir2+"'").addClass('active'); 66 } else if($dir3 > num_box02) { 67 $('.archiveBox_item_box02 ').children("'."+$dir2+"'").addClass('active'); 68 } else { 69 var minValue = Math.min.apply(null, item_box02Array); 70 $('.archiveBox_item_box02 ').children("'."+minValue+"'").addClass('active'); 71 } 72}); 73item_box03.each(function(){ 74 var class_box03 = $(this).attr('class'); 75 var num_box03 = Number(class_box03); 76 if($dir3 = num_box03) { 77 $('.archiveBox_item_box03 ').children("'."+$dir2+"'").addClass('active'); 78 } else if($dir3 > num_box03) { 79 $('.archiveBox_item_box03 ').children("'."+$dir2+"'").addClass('active'); 80 } else { 81 var minValue = Math.min.apply(null, item_box03Array); 82 $('.archiveBox_item_box03 ').children("'."+minValue+"'").addClass('active'); 83 } 84}); 85item_box04.each(function(){ 86 var class_box04 = $(this).attr('class'); 87 var num_box04 = Number(class_box04); 88 if($dir3 = num_box04) { 89 $('.archiveBox_item_box04 ').children("'."+$dir2+"'").addClass('active'); 90 } else if($dir3 > num_box04) { 91 $('.archiveBox_item_box04 ').children("'."+$dir2+"'").addClass('active'); 92 } else { 93 var minValue = Math.min.apply(null, item_box04Array); 94 $('.archiveBox_item_box04 ').children("'."+minValue+"'").addClass('active'); 95 } 96}); 97 98/*----------------------------------------------------------------------------------*/ 99 100}); 101 102
回答1件
あなたの回答
tips
プレビュー