jQuery：URLパラメータごとにコンテンツ内容を変える

ろん
ろん

URLパラメータごとにコンテンツ内容を変える方法を紹介します。
今回はjQueryを使います。簡単にできるので是非お試しください。

URLパラメータとは

URLの後ろについてる「?」から始まる部分のことをいいます。

https://www.omakase.net/?category=animal
https://www.omakase.net/?category=fruit

複数つけるときは「&」を使って繋げることができます。
https://www.omakase.net/?category=animal&category=fruit

本題

まずはデモをご覧ください。
デモ

動物、フルーツ、色をそれぞれ5個、合わせて15個並べました。
これをURLパラメータに合わせて表示・非表示の切り替えを行いたいと思います。

HTML


<p">下記をクリックすると切り替わります。</p>
<ul class="link">
	<li><a href="https://www.omakase.net/ccv_demo/jquery/params.html?category=animal">動物のみ表示する</a></li>
	<li><a href="https://www.omakase.net/ccv_demo/jquery/params.html?category=fruit">フルーツのみ表示する</a></li>
	<li><a href="https://www.omakase.net/ccv_demo/jquery/params.html?category=color">色のみ表示する</a></li>
	<li><a href="https://www.omakase.net/ccv_demo/jquery/params.html?category=animal&category=color">フルーツ以外を表示する</a></li>
	<li><a href="https://www.omakase.net/ccv_demo/jquery/params.html">すべて表示する</a></li>
</ul>
<ul class="list">
	<li class="fruit">ぶどう>/li>
	<li class="color">赤色>/li>
	<li class="animal">ライオン>/li>
	<li class="animal">ゾウ>/li>
	<li class="color">黄色>/li>
	<li class="fruit">りんご>/li>
	<li class="color">青色>/li>
	<li class="animal">シマウマ>/li>
	<li class="animal">ウサギ>/li>
	<li class="fruit">みかん>/li>
	<li class="color">緑色>/li>
	<li class="animal">ネコ>/li>
	<li class="color">紫色>/li>
	<li class="fruit">ばなな>/li>
	<li class="fruit">さくらんぼ>/li>
</ul>

CSS


/*必要な部分*/
.list li { display: none; }
.list li.hide { display: block; }
/*装飾*/
.list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.list li {
	width: calc(100% / 3);
	padding: 10px;
	text-align: center;
	border: 1px solid #111;
}
.list li.animal { background: #dc5c5c; }
.list li.fruit { background: #6db25e; }
.list li.color { background: #5ea1b2; }

jQuery


$(function() {
	params = location.href.split("?");
	if(params.length>1){
		var url = decodeURI(location.search)
		if(url == "?category=animal") {
			$('.list li').not('.animal').addClass('hide');
		}else if(url == "?category=fruit") {
			$('.list li').not('.fruit').addClass('hide');
		}else if(url == "?category=color") {
			$('.list li').not('.color').addClass('hide');
		}else if(url == "?category=animal&category=color") {
			$('.list .fruit').addClass('hide');
		}else{
		}
	}
});

params = location.href.split("?");　でURLパラメータを取得し、「?」で分割します。

var url = decodeURI(location.search)　でパラメータ部分を取得します。

if(url == "?category=animal") {
$('.list li').not('.animal').addClass('hide');　でパラメータごとに対象の項目にクラスを追加します。

関連記事