特定のページだけaddClassが効かない

ショップサーブを用いてECサイトを作成中です。

ショップサーブの仕様で商品一覧ページと商品詳細ページは自動生成されるようになっています。
この商品一覧ページと商品詳細ページのデザインをカスタマイズしようと思い、現在ページのURLから<body>タグに.addClass()をつける処理を追加しました。

javascript
1$(function() {
2//URLを取得して整形
3var URL = location.href;
4URL = URL.replace(/\/\//g,"/");
5
6//split()で「/」ごとにURLを分解し、配列へ。
7var newURLarr = [];
8var URLarr = URL.split("/");
9var URLlength = URLarr.length;
10
11for(i=0;i<URLlength;i++){
12	//urlを整形
13	var newURLparts = URLarr[i];
14	var fixedDomain = newURLparts.replace(".html","");
15	fixedDomain = fixedDomain.replace(/\./g,"");
16	fixedDomain = fixedDomain.replace(":","");
17
18	//正規表現で判別して、カテゴリーページ、詳細ページごとに異なったクラス名を作成
19	if(fixedDomain.match(/^\d+\-\d+$/g)){
20		//商品詳細ページの場合、数字7桁-00のパターンで判別
21		fixedDomain = 'num'+fixedDomain;
22		//商品詳細ページ共通のクラスもつける
23		$('body').addClass('pDetail');
24	}else if(fixedDomain.match(/^\d{2,5}$/g)){
25		//カテゴリページの場合5桁のカテゴリIDで判別
26		fixedDomain = 'cat'+fixedDomain;
27	}else if(fixedDomain.match(/list/)){
28		//カテゴリーページ共通のクラスもつける
29		fixedDomain = 'list';
30	}
31	//bodyタグにクラスをつける
32	else if(URLlength>3 && i>1){
33		$('body').addClass(fixedDomain);
34	}else if(URLlength == 3){
35		$('body').addClass("home");
36	}
37};

参考にしたサイトはこちらです。
http://hamatte-wataru.com/shopserve_css_class/

商品一覧ページでも、商品詳細ページでも同じjsを読み込んでいます。
商品一覧ページでは<body>にクラスが追加されるのですが、商品詳細ページではクラスが付与されませんでした。
Chromeの開発者ツールで確認をすると

javascript
1//bodyタグにクラスをつける
2	else if(URLlength>3 && i>1){
3		$('body').addClass(fixedDomain);
4	}

の部分で「Uncaught TypeError: $ is not a function」の表示が出てしまっております。

商品一覧ページではこのエラーは表示されておりません。
読み込んでいるjQueryのバージョンも同一のものなのですが、3日行き詰ってしまい、ご相談させていただきたく思います。
よろしくお願いします。

t_obara

2017/02/13 03:09

再現可能な最小限のコードもご提示されてはいかがでしょうか。ご自身の整理にもなりますし、回答する側も再現コードがある方が正確な回答をしやすいかと思います。

行動規範の内容に同意します

回答2件

そのページのjQuertが読み込めてないのでは？

投稿2017/02/13 03:24

yambejp

総合スコア114775

Neko_doshi

2017/02/13 04:24

もしくはjQueryが最初に読み込まれていないか。。

行動規範の内容に同意します

ベストアンサー

そのページのどこかでnoConflict()が使用されていないでしょうか？

「$」ではなく「jQuery」で使用すれば動く可能性もあるかと思います。
例: jQuery('body').addClass(fixedDomain);

そのページで開発者ツールのコンソールに
「$.fn.jquery」を実行したら、jQueryのバージョンは表示されますでしょうか？

投稿2017/02/17 17:51

aki0923f

総合スコア84

tokiodeluxe

2017/03/24 06:48

jQueryの表示にしたら動きました！ページAとページBで同じjavascriptを読んでいるのに、ページAでは問題なく「$」表示で動くのに、ページBでは「jQuery」表示じゃないと動かないとは・・・再度勉強しなおします。

aki0923f

2017/05/30 15:39

解決したようで、安心いたしました。ひょっとしたら、商品詳細ページではprototype.js等、jQueryと同じく「$」を使用するライブラリが埋め込まれている可能性がありますね。このような場合、jQueryのnoConflict()を記述することで他のライブラリとのバッティングを防ぐことがあります。以上、ご参考までに。

行動規範の内容に同意します

あなたの回答