URLのパラメータの値によってコンテンツの表示・非表示を切り替えるjQuery
更新日：2021年5月15日
https://www.web-officer.com/?genre=1
の?genre=1の部分のことをURLパラメータといいます。
このURLパラメータを使うことによって、実際は1つのページにも関わらず、
アクセスするURLパラメータの値によって、コンテンツの表示・非表示を切り替えたりと色々な見せ方をすることが出来ます。
百聞は一見に如かずということで、下記の4つのURLをご覧下さい。
1つのページ（htmlファイル）ですが、パラメータを付与することにより、コンテンツを非表示にして違う見せ方をしています。
index.html
index.html?genre=1
index.html?genre=2
index.html?genre=3
お分かり頂けましたでしょうか？
index.htmlには赤色の記事、青色の記事、黄色の記事の全ての記事が含まれていますが、
アクセスするURLのパラメータの1、2、3の値によってコンテンツが切り替えられています。
それでは早速実装方法ですが、jQueryで下記のように書きます。
$(function() {
var params = (new URL(document.location)).searchParams;
var genre_num = params.get("genre");
if(genre_num == 1) {
$(".genre1").show();
$(".genre2").hide();
$(".genre3").hide();
} else if(genre_num == 2) {
$(".genre1").hide();
$(".genre2").show();
$(".genre3").hide();
} else if(genre_num == 3) {
$(".genre1").hide();
$(".genre2").hide();
$(".genre3").show();
}
});
document.locationで現在のURLオブジェクトを取得し、
searchParamsでクエリパラメータを扱えるようになります。
簡単に言うとパラメータが付与出来る状態を作り出しました。
あとはgetを使えば任意の名前の変数を使って自由にアクセスすることが出来ます。
今回の例でいうとgenreという名前の変数を作成して、
URLパラメータでgenreという名前でアクセス出来るようにしました。
var genre_num = params.get("genre");
それをgenre_numという変数に入れて、
genre_numが1の時にはgenre1のclassがついたdivは表示し、
genre2とgenre3のclassがついたdivは非表示にするというif文を書いています。
次にHTMLで下記のように書きます。
赤色の記事
ジャンル：赤〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇青色の記事
ジャンル：青〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇緑色の記事
ジャンル：緑〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
あくまで例なので記載している文章はダミーですが、
大事なのはgenre1、genre2、genre3というclassがdivにあたっていることです
最後にCSSを記載。これは装飾用なので必須ではありません。無視でも大丈夫ですが一応。
.genre {
border: 1px solid #999;
padding: 2%;
margin-bottom: 15px;
}
.tag1 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #F00;
border: solid 2px #F00;
border-radius: 3px;
transition: .4s;
}
.tag2 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #00F;
border: solid 2px #00F;
border-radius: 3px;
transition: .4s;
}
.tag3 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #0F0;
border: solid 2px #0F0;
border-radius: 3px;
transition: .4s;
}
これにて完成です！
改めてjQueryって本当に便利ですね。
色々な活用方法がある汎用性の高いソースコードになりますので、
是非使って下さい！
