同一HTML内に複数のjQueryを作動させる方法

同一HTML内に複数のjQueryを作動させる方法

同一html内のページに複数のドロップダウンとスライドショーのjqueryで設置したところ、
スライドショーの方は動いていますが、ドロップダウンの方が動きません。記述は下記のとおりです。
両方とも動かすにはどのような記述にすればよいのでしょうか。




<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobil … />
<link rel="stylesheet" href="css/flexslider.css" />
<link rel="stylesheet" href="css/sample2.css" />
<script src="http://code.jquery.com/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/sample2.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobil …



<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11 …
<script type="text/javascript" src="jquery.sidr.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide-menu').sidr({
name: 'sidr-menu',
side : 'left'
});
});
</script>

No.2 回答者： fujillin 回答日時： 2016/09/01 14:41

ANo1です。

＞noConflict()は今回のソースの中でどこに
＞置き換えるもしくは挿入すれば良いのでしょうか？
まずは、それぞれのライブラリが同じバージョンのjQueryで動作しないのかをご確認ください。
たいていの場合は動作するので、noConflict()は必要ないものと想像します。

No.1 回答者： fujillin 回答日時： 2016/09/01 13:08

こんにちは

jQuery本体を何度か読み込んでいるようですが、複数回読み込むと、その前に設定した準備処理などが上書きされて無効になってしまいます。（DOMなどに既に反映された変更などはそのまま生きますが…）
これが、動作しない主な原因ではないでしょうか？

jQuery本体はひとつを最初に読み込むようにしてください。
また、バージョンが何種類かあるようですが、多くの場合、新しいバージョンであれば動作すると推測します。
念のため、事前に、ご利用なさっているライブラリが、同じバージョンのjQueryでそれぞれ動作することを確認なさってください。
まれに、バージョンが変わると動作しなくなるものもあるようですので。

共通のjQUeryで動作しない場合は、やむを得ず2種類のjQueryを読み込まざるを得ませんが、その際は、お互いが干渉しないようにnoConflict()を利用するようにしてください。
http://api.jquery.com/jQuery.noConflict/


ほとんどの場合は、ここまでで対処可能だと思います。
ごくまれに、ライブラリどうしが干渉してしまう場合もあり得ますが、この場合は別途、干渉の原因を探して個別に対処するしかないと思われます。

この回答へのお礼

返信ありがとうございます。
実は当方このようなシステムに関しては全くの初心者で色々とネットでも調べたのですが、全くわかりませんでした。

noConflict()は今回のソースの中でどこに置き換えるもしくは挿入すれば良いのでしょうか？すいません。

お礼日時：2016/09/01 14:23