jQuery と prototype.js のコンフリクトを回避する方法

jQuery と prototype.js を同時に使うとコンフリクトを起こします。なぜなら、jQuery はprototype.js と同じく(正確には同じではないのですが) document.getElementById() のショートカットとして $() を使っているためです。
より正確な説明は以下のページが詳しいです。
prototype.jsとThickBox(jQuery)がコンフリクト｜blog｜たたみラボ

解決策としては、どちらか一方の $ function を別の文字に置き換えてしまえば良いかもしれないというわけで、今回は jQuery の $ function を j$ に変えてみましょう。

例えば以下のコードの場合。

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$("table").each(function(){
		$(this).find("tr:even").addClass("even");
	});
	$("tr").hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		}
	);
});

以下のように $ を j$ に置き換えることで解決できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var j$ = jQuery;
j$(function(){ 
	j$("table").each(function(){
		j$(this).find("tr:even").addClass("even");
	});
	j$("tr").hover(
		function() {
			j$(this).addClass("hover");
		},
		function() {
			j$(this).removeClass("hover");
		}
	);
});

確か j$ じゃなくても jQuery と書いても動くはずです。すいません、試してません。短いコードが好きかもなので。

関連記事

コメント

コメントは受け付けていません。