バージョンの違いで動かないjQueryを両方動かせるようにしたい。

前提・実現したいこと

カラーミーショップでオリジナルテーマを作っているのですが、バージョンの違いでjQueryが動かないです。両方動かせるようにしたいです。

発生している問題・エラーメッセージ

どちらか一つのバージョンに設定するとどこかが動かなくなってしまっている。（トップスライダーは動いているが、ハンバーガーメニューが動かない。など）

jQueryのバージョンを

  srcs.forEach(function(src) {
    var script = document.createElement('script');

    script.type = 'text/javascript';
    script.src = src;
    script.async = true;

    entry.parentNode.insertBefore(script, entry);
  })
}

window.addEventListener('load', insertScriptTags, false);

})();
</script>

</head>


### 試したこと

下のurlを参考に、もともと読み込んであるjQueryを一回削除してまた新しいバージョンを読み込むという方法を試しましたが、変化なしでした。

https://helog.jp/javascript/jquery-noconflict/
https://souken-blog.com/2016/11/08/colormeshop-sono001/

x_x

2019/07/03 01:09

<body>のあとにまた<!DOCTYPE html>からの記述がありますが、これで一つのファイルのコードを出しているのでしょうか？

UKYO9311

2019/07/03 01:27

返信ありがとうございます！！すみません現在下のbodyタグ以下を削除してみたのですが、何も変わらなかったのでいらない記述だったようです。。。上の<head>内はカラーミーショップのもともとあるコード、下は自分がHTML構築の時に使っていたコードだったのですが。。。まだjQueryは正常に動いていません。

Lhankor_Mhy

2019/07/03 01:34

https://souvenir-club.shop-pro.jp/ エラーを見ると jquery.sample.js が存在しないようですね。ファイルの置き場所はどうなっていますか？

UKYO9311

2019/07/03 01:41

返信ありがとうございます！！ https://souken-blog.com/2016/11/08/colormeshop-sono001/ こちらのサンプルをコピペしたのでjquery.sample.jsがそのままになっていました。他のファイルはどこにも置いてなかったので、このスクリプトを消したらエラーがなくなりました！！

Lhankor_Mhy

2019/07/03 02:09

scripts.js も同様にファイルが存在しないようです。

UKYO9311

2019/07/03 02:31

ご指摘ありがとうございます！こちらも削除しました。。。基本的にはファイルをどこかに置いて読み込む、ということはしていなかったんですね...

Lhankor_Mhy

2019/07/03 02:41

とりあえず、スライダーは動くようになったのですね。あとは何でしたっけ？ソースを更新したら、質問のコードも更新しておいた方がいいでしょう。そうでないと、回答はつかないと思います。

Lhankor_Mhy

2019/07/03 02:44

あと、現状の問題の更新も。

UKYO9311

2019/07/03 02:50

すみませんエラーはなくなったのですが、スライダーはまだ動いていません（ ; ; ）ありがとうございます！ただいま更新します。

Lhankor_Mhy

2019/07/03 02:55

あれ？動いていないな。さっき見たときには動いていたのだけれど……？

UKYO9311

2019/07/03 03:06

すみませんこちらで色々いじっていたので。。。 jQueryのバージョンを <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> にするとスライダーは動きます。しかしハンバーガーメニューなど他のjQueryが動かなくなります。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> にすると、他のjQueryは動くのですが、スライダーは動かなくなってしまうのです。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> はもともとカラーミーショップ側で読み込んでいるバージョンなのです。説明不足でした。質問も更新します。

mepon

2019/07/03 03:43

3つjQueryを読み込んでいるようにみえるのですが・・・最新のコードに編集して現状の問題点ももう一度教えていただけますか？

x_x

2019/07/03 04:12

jquery.sample.js と、body の内容も提示してください。現状では何もないので、動く動かないの確認ができません。

UKYO9311

2019/07/03 04:32

ご返答ありがとうございます！（ ; ; ）現在のコードを更新致しました。すみませんコードが長すぎるためサイトurlを載せます。 https://souvenir-club.shop-pro.jp 大変お手数ですがご確認よろしくお願い致します。

Lhankor_Mhy

2019/07/03 05:20

やはりスライダーが動いているような……？解決されましたか？

UKYO9311

2019/07/03 05:44

いいえ！現在、スライダーが動いていない状態になってます泣その代わりハンバーガーメニューなどは動くのですが。。。

UKYO9311

2019/07/03 05:50

あ。今キャッシュをクリアしたら一瞬両方動くようになりました。また更新したら元に戻ってしまうのですが。。。

Lhankor_Mhy

2019/07/03 05:58

うーん、たぶんですが、jQueryのバージョンの問題ではないように思えますね…… その方向で回答を入れます。

mepon

2019/07/03 06:08

簡単に調べてみましたが、bxSliderの中で.load()が使われているようで .load()はjQuery3系にて廃止されています。恐らくそのせいで不安定になってるかもですね。

Lhankor_Mhy

2019/07/03 06:36

最新のだと入ってないですね…… https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js

UKYO9311

2019/07/03 06:41

mepon様の回答でいただいたbxsliderのコードも反映したので、もしかするとそちらも原因だったのかと思われます。。。heightを指定しただけではローディングがぐるぐるしてて表示されていなかったので。。。

Lhankor_Mhy

2019/07/03 06:43

なるほど。原因が二つあったのか……

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

回答2件

ベストアンサー

css
1#slider a{
2  height: 640px;
3}

とすると、どうなりますか？

追記

もしかすると、こっちの方がいいかも？

css
1#slider{
2  height: 640px;
3}

投稿2019/07/03 06:00

編集2019/07/03 06:06

Lhankor_Mhy

総合スコア36074

UKYO9311

2019/07/03 06:34

回答ありがとうございます！！表示されました（ ; ; ）行なった作業として、Lhankor_Mhy様のいう通り #slider{ height: 640px; } を入れて、自分で追加したスクリプト <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $.noConflict(); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> を全て消してカラーミー標準のバージョンにしたら正常に動きました。。。バージョンの問題ではなかったみたいですね。みなさまご協力ありがとうございます（ ; ; ）本当に感謝です。ありがとうございました。

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

$.noConflict();の下に下記コードを入れてコンソールログを確認してみてください。
使いたいバージョンが2つ出ていれば問題ありません。

jQuery
1(function($){
2  $(function(){
3    console.info("$ = " + $.fn.jquery);
4  });
5})($);
6
7(function($){
8  $(function(){
9    console.info("jQuery = " + $.fn.jquery);
10   });
11})(jQuery);

ご質問から察するに
ハンバーガーメニュー等を使用するには→jQuery3.2.1
トップスライダーを使用するには→jQuery1.7.2
を使用すれば動くとの認識ですが
コードを確認したところ、1.7.2の読み込み後に$.noConflict();があり
その後に3.2.1を読み込んでいます。
つまり$には3.2.1が定義されていて
jQueryには1.7.2が定義されている状態かと思われます。（上記コードで確認してみてください）

この場合スライダーの部分のみ書き換える必要があり

jQuery
1(function($){
2  $(function(){
3    $('#slider').bxSlider({
4      auto: true,
5      pause: 4000,
6      speed: 1000,
7      controls: false,
8      captions: true,
9      mode: 'fade'
10    });
11  });
12})(jQuery);
13