重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

同じHTML上に2つのjQuery を組み込む方法を教えてください。

解決済

  • 質問者：haveaniceone
  • 質問日時：
  • 回答数：3件

同じHTML上にメニューナビとタイルレイアウトの2つをいれようとしていますが、
片方のみしか作動しません。
色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法を使っても片方のみしか動きません。

こちらが記述になります。
-------------------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="js/jquery.fs.naver.js"></script>
<link rel="stylesheet" href="css/jquery.fs.naver.css">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-eas … type="text/javascript" charset="UTF-8"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery.vgrid.min.js" type="text/javascript" type="text/javascript" charset="UTF-8"></script>


<script type="text/javascript">

var $1113 = $.noConflict(true);

$(document).ready(function($) {
$("nav").naver({
labels: {
closed: "メニュー",
open: "CLOSE"
},
maxWidth: "568px"
});
});

$(function(){
$("#grid-content").vgrid();
});
</script>

----------------------------------------------------------------------

以上が現在の記述ですが作動できません。

ご回答宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo1、2です。



＞問題なく両方問題なく作動しますでしょうか？
当方の環境では、両方とも動作しています。
回答のソースで動作しないとのことですが、そのままで試していますか？
（とはいっても、src属性などが省略表示されてしまうので、修復が必要でしたが・・・）


念のため、コピペ可能なようにして再掲しますので、そのままコピペで試してみてください。
（大勢に影響ないところの不備を少しだけ訂正してあります。）


※ 以下のソースをコピペの上、scriptタグのsrc属性とlinkタグのhref属性のURLの最初の一文字を「ｈ（全角のｈ）」→「h（半角英数のh）」に修正してから、試してみてください。
　（修正個所は、全部で５箇所あります）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>test</title>

<style type="text/css">
#navre a {
background: #6C0;
display: block;
float: left;
margin: 0 1px 0 0;
padding: 8px 30px;
text-decoration: none;
}
#navre a:hover {
background: #DC0;
}
@media screen and (max-width: 740px) {
#navre a {
float: none;
margin: 0 0 1px 0;
width: 100%;
}
}

#grid-content{ margin-top: 10px; }
#grid-content div{
width: 200px;
border: 1px solid gray;
margin: 5px; padding: 5px;
}
#grid-content div h3{ margin:0 0 5px; }
#grid-content div p{ margin:0; padding:0; }
</style>


<script type="text/javascript" src="ｈttp://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<link rel="stylesheet" type="text/css" href="ｈttp://studio-benkei.com/wp-content/themes/sb-theme/common/sample/css/jquery.fs.naver.css"/>
<script type="text/javascript" src="ｈttp://studio-benkei.com/wp-content/themes/sb-theme/common/sample/js/jquery.fs.naver.min.js"></script>

<script type="text/javascript" src="ｈttp://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="ｈttp://blog.xlune.com/2009/09/vgrid/js/jquery.vgrid.min.js"></script>

<script type="text/javascript">
$(function(){
$("#navre").naver();
$("#grid-content").vgrid({ });
});
</script>

</head>
<body>

<div style="overflow: hidden;">
<nav id="navre">
<a href="#">home</a>
<a href="#">piyo1</a>
<a href="#">piyo2</a>
<a href="#">piyo3</a>
</nav>
</div>


<div id="grid-content">
<div><h3>hoge1</h3>
<p>fugafugafuga</p>
</div>

<div><h3>hoge2</h3>
<p>fugafugafuga</p>
<p>fugafugafuga</p>
</div>

<div><h3>hoge3</h3>
<p>fugafugafuga</p>
</div>

<div><h3>hoge4</h3>
<p>fugafugafuga</p>
<p>fugafugafuga</p>
<p>fugafugafuga</p>
<p>fugafugafuga</p>
</div>

<div><h3>hoge5</h3>
<p>fugafugafuga</p>
<p>fugafugafuga</p>
</div>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

丁寧なご教授有難うございました。
記述どおりやりましたら、しっかり動きました。
誠に有り難うございました。

未だ頂いた記述の理解ができていないので、しっかりと記述を理解したいと思っております。
そして自分でも確実にできるようにしたいと思っております。

何度もご丁寧にご回答いただき有難うございました。

通報する
お礼日時：2016/01/08 01:12

No.2

  • 回答者： fujillin
  • 回答日時：

ANo1です。



＞私が質問で記載した記述ですと最初のJQueryが動いて～
私が書いたのはjQuery本体のことです。
ヴァージョン1.11と1.10を続けて読み込んでいますが、後の方（1.10）が残るだけにあるという意味です。
つまり、その後$やjQueryで呼び出されるのは後者になりますという意味です。

しかしながら、ご提示のソースでは、その後
　var $1113 = $.noConflict(true);
を実行していますので、これより後では$やjQueryは未定義状態になっていると思います。
それなので、その後のスクリプトは動作していないのではないでしょうか？


どうも、話が通じてないようなので、実際のライブラリで試してみました。
naverもvGridも使ったことが無いので、まったく知りませんが、サンプルのコピペを超テキトーに短縮してテストしています。
以下のソースでテストしたところ、両方とも動作していますので、競合は無さそうに思われますが・・・
どこか、設置方法やオプションの設定、あるいはURIの指定等でおかしなことになっていませんか？


※ ライブラリの説明を読まずに超テキトー設定なので、応用の際は、きちんと説明をお読みの上正しく設置してください。
※ 手元のＩＥ11及びfx42で動作を確認しています。
※ 以下のテストサンプルはコピペでも動作するはずですが、表示される際にURIがリンクとなって省略されてしまいますのでご注意。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>test</title>

<style type="text/css">
#navre a {
background: #6C0;
display: block;
float: left;
margin: 0 1px 0 0;
padding: 8px 30px;
text-decoration: none;
}
#navre a:hover {
background: #222;
}
@media screen and (max-width: 740px) {
#navre a {
float: none;
margin: 0 0 1px 0;
width: 100%;
}
}

#grid-content{ margin-top: 10px; }
#grid-content div{
width: 200px;
border: 1px solid gray;
margin: 5px; padding: 5px;
}
#grid-content div h3{ margin:0 0 5px; }
#grid-content div p{ margin:0; padding:0; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<link rel="stylesheet" type="text/css" href="http://studio-benkei.com/wp-content/themes/sb-

theme/common/sample/css/jquery.fs.naver.css"/>
<script type="text/javascript" src="http://studio-benkei.com/wp-content/themes/sb-

theme/common/sample/js/jquery.fs.naver.min.js"></script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-eas …
<script type="text/javascript" src="http://blog.xlune.com/2009/09/vgrid/js/jquery.vg …

<script type="text/javascript">
$(function(){
$("#navre").naver();
$("#grid-content").vgrid({ });
});
</script>

</head>
<body>
<div style="overflow: hidden;">
<nav id="navre">
<a href="#">home</a>
<a href="#">piyo1</a>
<a href="#">piyo2</a>
<a href="#">piyo3</a>
</nav>
</div>


<div id="grid-content">
<div><h3>hoge1</h3>
<p>fugafugafuga
</div>

<div><h3>hoge2</h3>
<p>fugafugafuga
<p>fugafugafuga
</div>

<div><h3>hoge3</h3>
<p>fugafugafuga
</div>

<div><h3>hoge4</h3>
<p>fugafugafuga
<p>fugafugafuga
<p>fugafugafuga
<p>fugafugafuga
</div>

<div><h3>hoge5</h3>
<p>fugafugafuga
<p>fugafugafuga
</div>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にご回答ありがとうございます。
私のほうでもご提示いただいたソースで試させて頂きましたが、
やはり$("#grid-content").vgrid({ });の方がしっかりと動かない状況でした。
タイルレイアウトのgrid-contentは画面サイズに合わせて自動的に2段、3段となるのですが私の環境では1段のままでjQueryが動かないです。
このページを参考にしました。
http://blog.xlune.com/2009/09/vgrid/demo001.html

環境はFx 43.0.1、IE11で試してみました。

ハンバーガーメニューの方は確かに動いていました。

fujillinさんでは、問題なく両方問題なく作動しますでしょうか？

何度もすみません。
ご回答有難うございます。

通報する
お礼日時：2016/01/07 15:59

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは。



通常は、ライブラリ同士が競合しない限り複数（3つでも4つでも）同時に実装することが可能です。
また、大抵のライブラリは、競合を避けるための注意をはらって作られているものが多いとは思いますが…


動作しない原因は競合以外にもいろいろあり得ると思いますが、とりあえず競合が原因だとして・・・

ご提示のHTMLでは異なるバージョンのjQueryを読み込んでいるようですが、ご提示の記述のままだと意味がありません。
先に読み込んだjQueryを後から読み込んだjQueryでそのまま上書きしていますから、後から読んだものだけが有効になることになります。

これらを別々に使い分けたいのであれば、
　1）先のものを読込む
　2）jQuery.noConflictで一旦別の変数に設定（以後はこの変数名で呼び出す）
　3）後のものを読込む（通常通り$やjQueryで呼び出し可能）
といった手順で実行するようにしてください。

当然ながら、その後の呼び出し（=利用）に際しては、1）を利用する場合は新しく定義した変数名で、2）を利用する場合は通常の$やjQueryで利用するように使い分ける必要があります。
あるいは、2）と同時に一つ目のライブラリの初期設定なども行ってしまうほうが分かり易いかもしれませんね。

詳しくは以下を参照してください。
http://semooh.jp/jquery/api/core/jQuery.noConfli …
http://api.jquery.com/jQuery.noConflict/


※ 競合以外が原因の場合は、上記では効果がないと考えられます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答有難うございます。
参考のサイトを見て検証していますが、私の理解が乏しいのか
未だ成功に至っていません。

ひとつ質問ですが、ご回答頂いた点で少し違うのが後者の方が動くということですが、
私が質問で記載した記述ですと最初のJQueryが動いて
後のほうが動かない状態なのですが、これでも競合が原因なのでしょうか？

それともただ記述が間違っているだけでしょうか?

何度もすみません。

宜しくお願い致します。

通報する
お礼日時：2016/01/07 00:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報