2013

『jQueryで特定のURLが一致したら処理してやんよ!!!』

たとえば共有してるインクルードファイルの記述の中に特定のページにだけバナーやタグを追加したい場合、そのページだけ静的にソースを別個記述するのは更新性的にもイヤなので

特定のページに該当する条件で処理するjQueryをつくる。

もしこのページにだけ追加したい処理がある場合、URLの下層ディレクトリのファイル名で指定すれば良いので

<ul>
	<li>あああああ</li>
	<li>いいいいい</li>
	<li>うううううううう</li>
</ul>

という記述を共通インクルードファイルに記述していた場合に、特定の下層ページにだけ<li>を追加したいという場合に

<ul>
	<li>あああああ</li>
	<li>いいいいい</li>
	<li>うううううううう</li>
	<li class="eee">えええええええ</li>
</ul>

と加える。次にCSS部分。

li.aaa {
display: none;
background: #000;
color: #FFF;
}

こんな感じで装飾。（※ここで大事なのはdisplayを通常時はnoneで非表示にしておく事）そんでこのページにだけ<li class="eee">追加したいページにjsを記述。

$(window).bind("load", function(){
	if(document.URL.indexOf("○○○○.html")) {
		$('li.eee').css('display','block');
	}
});

現在読み込まれているURLとjsで指定したURLと一致した場合、<li class="eee">のリストが表示される。

特定のカテゴリやコンテンツによって追加したい場合の処理。大体の方はファイル名にそれにちなんだファイル名を付けてると思うので、そのファイル名に共通する文字列と一致した場合に加える処理

$(window).bind("load", function(){
	if(document.URL.match(/..共通文字列/)) {
		$('li.eee').css('display','block');
	}
});

これでファイル名に指定した文字列が含まれるURLを読み込んだ場合に<li class="eee">が表示される