質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

994閲覧

URL取得、表示・非表示切替

takej3

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/02/06 12:00

編集2019/02/06 13:01

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/02/06 12:32

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、具体的に記述されたほうが回答を得られやすいと思います。
guest

回答1

0

ベストアンサー

例えばこんな感じで処理すればよいと思います。

JavaScript

1var a = [ 1811, 1807, 1804, 1802 ] 2var b = [ 1902, 1810, 1806, 1803, 1712 ] 3var c = [ 1812, 1808 ] 4var d = [ 1901, 1809, 1805, 1801 ] 5 6function filter_class( arr, key ) { 7 var i, l, target; 8 arr.sort(); 9 console.log( arr ); 10 for ( i = arr.length - 1 ; i >= 0; i-- ) { 11 target = arr[ i ]; 12 if ( target === key || target < key ) break; 13 } 14 console.log( target ); 15} 16filter_class( a, 1901 ); 17filter_class( b, 1901 ); 18filter_class( c, 1901 ); 19filter_class( d, 1901 ); 20```**動くサンプル:**[https://jsfiddle.net/5by0epqk/](https://jsfiddle.net/5by0epqk/)

投稿2019/02/06 13:35

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takej3

2019/02/07 01:16 編集

返信が遅くなりました。 ありがとうございます! 意図した値を取得していました。 高評価にさせていただきました! 1点質問があります。 filter_class( a, 1901 ); で取得したtargetの値を代入して使用する場合はどのようにしたらよいでしょうか。 filter_class( a, 1901 );のtargetをvar archiveBox_item_box01 = target filter_class( b, 1901 );のtargetをvar archiveBox_item_box02 = target filter_class( c, 1901 );のtargetをvar archiveBox_item_box03 = target filter_class( d, 1901 );のtargetをvar archiveBox_item_box04 = target 別に質問を設定したほうがよいでしょうか。
kei344

2019/02/07 01:57

console.log( target );の箇所でreturn target;とすれば、 var archiveBox_item_box01 = filter_class( a, 1901 ); こういう風に代入が出来ます。
takej3

2019/02/07 02:10

早速ご返信ありがとうございます。 初歩的なことで追加の質問してしまいました。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問