![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
mootoolsとjQueryの共存がうまくいかない。
▼共存参考サイト
http://h2ham.seesaa.net/article/106053238.html
参考サイトを見て、共存したいのですが、Operaでうまくいきません。
IE、fox、safari、chromeではうまくいくのですが・・・
$をj$などに変えてみたりいろいろ試しましたがうまくいきませんでした。
お力添えよろしくお願いします。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></sc …
<script type="text/javascript" src="../js/yuga.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="../js/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
theInterval = function(cur){
clearInterval(theInt);
if( typeof cur != 'undefined' )
curclicked = cur;
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 5 == curclicked )
curclicked = 0;
}, 15000);
};
$(function(){
$("#main-photo-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});
theInterval();
});
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery;
-->
</script>
<script src="../js/mootools.js" type="text/javascript"></script>
<script src="../js/menu.js" type="text/javascript"></script>
<script src="../js/main.js" type="text/javascript"></script>
No.1ベストアンサー
- 回答日時:
参考にされているサイトの記述内容の繰り返しになってしまいますが、
>jQuery.noConflict();
>var j$ = jQuery;
まず、上記でコンフリクトを避けている方法の意味(処理内容)を理解する必要があります。
簡単に書けば、$をjqueryの関数からはずして(他のライブラリのために開放して)、jquery用には新しくj$(それ以外でもかまいませんが)を定義し直すことでコンフリクトを避けようとしています。
あるいは、新しく定義し直さない方法として
(function($) {
// $関数を用いたjQuery用のコード
})(jQuery);
みたいな方法もあります。
なので、それ以降に実行されるスクリプトではj$を使用していなければ正しく処理をされません。
setIntervalで実行される内容やイベント処理などのように、mootoolsを読込んだ後に実行される内容がこれに当たります。
処理が実行されるタイミングと、その時に示す$の内容が意図通りになっているかを確認してください。
ご提示のコードの書き方だと、このあたりを理解されていないように想像されます。
単なるおまじないとしてコードを書くのではなく、まずは、noConflictの意味合いを理解してください。
<参考サイトと同様のサイト>
http://blog.hayazo.com/?p=57
http://stacktrace.jp/jquery/with_other_lib.html
http://allabout.co.jp/gm/gc/24167/3/
<jquery documentation>
http://api.jquery.com/jQuery.noConflict/
<日本語リファレンス>
http://semooh.jp/jquery/api/core/jQuery.noConfli …
また、サブのライブラリを利用しているようですが、それらがnoConflict()を考慮して作成されているとは限りませんのでそちらにも注意が必要です。
http://d.hatena.ne.jp/masahi6/20071129/1196355971
別法として、mootools側でコンフリクトを避ける方法として「Dollar Safe Mode」というのが用意されているようなので、この方法を用いるというのもありそうです。
jqueryの場合と方法的には同じなので、mootools利用のサブのライブラリがどのような対応をしているか不明ですので、そちらも調べて対処しなければならないのは同様です。
http://sharedhat.com/blog/943/
http://mootools.net/blog/2009/06/22/the-dollar-s …
おまけ (単なる記法についての記事ですが)
http://0-9.sakura.ne.jp/blog/archives/2008/02/05 …
http://0-9.sakura.ne.jp/blog/archives/2008/05/09 …
ありがとうございます!
j$に定義し直したり、いろいろやりましたがやはり、Operaではうまく動きませんね・・・
サブのライブラリがnoConflict()を考慮して作成されてないのでしょうか・・・。
もう少し考えて、ダメでしたら違う方法を考えてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jsで、switch文で書かれた分をif文にできませんか。 1 2022/07/28 15:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript プラグイン無しでContactform7にdatepickerを実装 3 2022/10/25 02:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQuery GalleryViewスライドショー
-
jqueryでつぶやきを自動スライ...
-
crossSlideがうまく機能しない...
-
CrossSlideのスライドショーが...
-
<a href="#" …>の意味を教えて...
-
mailto + 変数名
-
インラインフレームをドラッグ...
-
twitter widgetが表示されない
-
初心者javascript ウィンドウサ...
-
javascriptとApacheの設定
-
HTMLでサブフレームから親のス...
-
bodyにidをつける理由は何ですか?
-
ページを訪問者にたった一度だ...
-
フレームを跨ぐドロップダウン...
-
HTMLアプリでインラインフレー...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptのエラー ( 関数の...
-
リンク移動先のURLを取得
-
小窓を表示する時に、必ず右上...
-
【javascript クロスブラウザ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
ebayの返信で『 Message may no...
-
DreamWeaverでJS
-
document.lastChild.appendChil...
-
パソコンでホームページを作成...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
jQueryのloadメソッドをする際...
-
フォントサイズを変更するボタ...
-
同一HTML内に複数のjQueryを作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報