jqueryが動かないです。バージョンの違うものを二重で使っているのが問題なのですが解決法がわかりません。

Question

jqueryが動かないです。バージョンの違うものを二重で使っているのが問題なのですが解決法がわかりません。

解決済

回答 4

投稿 2017/02/08 19:18 ・編集 2017/02/09 22:55

評価
クリップ 0
VIEW 3,592

TATSUY

score 11

スライドメニューとモーダルウィンドウを動かしたいのですが、二重で読み込んでいるためどちらかしか動きません。

コピペで作っているため、解決法がわからず困っています。
よろしくお願いします。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="../dist/js/jquery.min.js"></script>
<script src="modal.js"></script>

<div id="modal-content">

<div>
<label>場所名：<br />
<input type="text" name="name" size="50" maxlength="255" />
</label>
</div>
<div>
<label>評価：<br />
<select name="grade"><%=createOption(1, 5)%></select>
</label>
</div>
<div>
<label>危険度：<br />
<select name="danger"><%=createOption(1, 5)%></select>
</label>
</div>

</body>
</html>

modal.js
$(function(){

//モーダルウィンドウを出現させるクリックイベント
$("#modal-open").click( function(){

//キーボード操作などにより、オーバーレイが多重起動するのを防止する
$( this ).blur() ;    //ボタンからフォーカスを外す
if( $( "#modal-overlay" )[0] ) return false ;        //新しくモーダルウィンドウを起動しない (防止策1)
//if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;        //現在のモーダルウィンドウを削除して新しく起動する (防止策2)

//オーバーレイを出現させる
$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
$( "#modal-overlay" ).fadeIn( "slow" ) ;

//コンテンツをセンタリングする
centeringModalSyncer() ;

//コンテンツをフェードインする
$( "#modal-content" ).fadeIn( "slow" ) ;

//[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){

//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){

//[#modal-overlay]を削除する
$('#modal-overlay').remove() ;

} ) ;

//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer ) ;

//センタリングを実行する関数
function centeringModalSyncer() {

//画面(ウィンドウ)の幅、高さを取得
var w = $( window ).width() ;
var h = $( window ).height() ;

// コンテンツ(#modal-content)の幅、高さを取得
// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
// var cw = $( "#modal-content" ).outerWidth( {margin:true} );
// var ch = $( "#modal-content" ).outerHeight( {margin:true} );
var cw = $( "#modal-content" ).outerWidth();
var ch = $( "#modal-content" ).outerHeight();

//センタリングを実行する
$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

}

} ) ;

modal.css
@charset "UTF-8";

/* ここからデモページ用のコード */
body {
width: 100% ;
height: 5000px ;
padding: 0 ;
}
/* ここまでデモページ用のコード */

modal-content {
width: 50% ;
margin: 0 ;
padding: 10px 20px ;
border: 2px solid #aaa ;
background: #fff ;
position: fixed ;
display: none ;
z-index: 2 ;
}

modal-overlay {
z-index: 1 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
color: #00f ;
text-decoration: underline ;
}

.button-link:hover {
cursor: pointer ;
color: #f00 ;
}

demo.css
html, body
{
padding: 0;
margin: 0;
}
body
{
background-color: #fff;
font-family: Arial, Helvetica, Verdana;
font-size: 14px;
line-height: 22px;
color: #666;
position: relative;
-webkit-text-size-adjust: none;
}
body *
{
text-shadow: none;
}
h1, h2, h3, h4, h5, h6
{
line-height: 1;
font-weight: bold;
margin: 20px 0 10px 0;
}
h1, h2, h3
{
font-size: 18px;
}
h4, h5, h6
{
font-size: 16px;
}
p
{
margin: 0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover
{
color: inherit;
text-decoration: underline;
}

nav:not(.mm-menu)
{
display: none;
}

.header,
.content,
.footer
{
text-align: center;
}
.header
{
background: linear-gradient(-135deg, #E4A972, #9941D8);;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 40px;

-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 50px;
}
footer
{
background: linear-gradient(-135deg, #E4A972, #9941D8);   /* 背景色(黒) */
width:100%;               /* 横の幅を100% */
height: 30px;            /* 縦の幅を120px */
position: fixed;       /* 絶対位置指定することを定義 */
bottom: 0px;              /* 絶対位置指定(左0px,下0px) */
padding: 10px 0;          /* 上下に余白を取る */
}

.pen
{
text-align: center;
}

.header.fixed
{
position: fixed;
top: 0;
left: 0;
}
.footer.fixed
{
position: fixed;
bottom: 0;
left: 0;
}
.header a
{
display: block;
width: 28px;
height: 18px;
padding: 11px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,
.header a:after
{
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span
{
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content
{
padding: 150px 50px 50px 50px;
}
```

試したこと

現状：左上のスライドメニューは機能しませんが、モーダルウィンドウは画像のように表示されます。

コメントを参考にさせていただき
<script src="../dist/js/jquery.min.js"></script>を消すと
スライドメニューとモーダルウィンドウは動きましたが、モーダルウィンドウ内の選択ができなくなりました。

補足情報(言語/FW/ツール等のバージョンなど)

コードブロックに関して
ハッシュタグで段落分けされていて誤解を招いた可能性があります。
上記のhtmlで一つのコードです。
申し訳ございません。

特定に関して
jquery.min.jsを読み込むとスライドメニューが動かなくなるので、jqueryの二重読み込みが原因かと
安直な考えですいません。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

3 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

kei344

2017/02/08 19:22

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

キャンセル
Lhankor_Mhy

2017/02/09 10:24

補足願います。『バージョンの違うものを二重で使っているのが問題』とありますが、それが問題であって他の原因ではないということは、どのようにして特定されましたか？

補足願います。『バージョンの違うものを二重で使っているのが問題』とありますが、それが問題であって他の原因ではないということは、どのようにして特定されましたか？

キャンセル
s8_chu

2017/02/09 22:34 編集

プラグインを使用している場合はそれの情報を追記してくださいませんか？modal.js, modal.css, demo.cssの内容についてもコードの追記をよろしくおねがいします。

プラグインを使用している場合はそれの情報を追記してくださいませんか？modal.js, modal.css, demo.cssの内容についてもコードの追記をよろしくおねがいします。

キャンセル

回答 4 件

評価が高い順
新着順
古い順

+1

jQueryはたとえ同じバージョンでも２回読み込むとわけのわからない挙動をするようになります。1つだけ読み込みましょう。

投稿 2017/02/09 09:55

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

<script src="../dist/js/jquery.min.js"></script>

を消せば動きそうですが・・・。

投稿 2017/02/09 13:58

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/02/09 22:34

コメントありがとうございます！
参考にさせていただき消すとスライドメニューとモーダルウィンドウの表示は可能になりました。
しかし、モーダルウィンドウ内のコンテンツが機能しなくなりました。。

コメントありがとうございます！参考にさせていただき消すとスライドメニューとモーダルウィンドウの表示は可能になりました。しかし、モーダルウィンドウ内のコンテンツが機能しなくなりました。。

キャンセル

0

二重で読み込んでいるためどちらかしか動きません

状況がわかりませんが、片方に統一すればいいのでは？

投稿 2017/02/08 19:42

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

jQuery

score 4 · Accepted Answer · 2017-02-09T23:25

このように行うといかがでしょうか？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.7.8/css/jquery.mmenu.all.css">
    <link href="modal.css" rel="stylesheet">
    <link href="demo.css" rel="stylesheet">
    <title>bike-map</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        map {
            height: 80%;
            width: 80%;
        }
    </style>
</head>
<body>
<div id="page">
    <div class="header" id="header">
        <a href="#menu"><span></span></a>
        bike-map
    </div>
    <nav id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </nav>
</div>

<div id="map">
    <img src="test.png">
</div>

<div id="footer">
    <div class=pen>
        <p><a id="modal-open" class="button-link"><img src="test.png"></a></p>
    </div>
</div>

<!-- ここからモーダルウィンドウ -->
<div id="modal-content">
    <div>
        <label>場所名：<br>
            <input type="text" name="name" size="50" maxlength="255">
        </label>
    </div>
    <div>
        <label>評価：<br>
            <select name="grade"><%=createOption(1, 5)%></select>
        </label>
    </div>
    <div>
        <label>危険度：<br>
            <select name="danger"><%=createOption(1, 5)%></select>
        </label>
    </div>

    <div>
        <label>コメント：<br>
            <input type="text" name="comment" size="50" maxlength="255">
        </label>
    </div>

    <label>lat：
        <input type="text" name="lat" size="50" maxlength="255">
    </label><br/>
    <label>lng：
        <input type="text" name="lng" size="50" maxlength="255">
    </label>

    <div>
        <input type="submit" value="登録">
    </div>
    <p><a id="modal-close" class="button-link">閉じる</a></p>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.7.8/js/jquery.mmenu.all.min.js"></script>
<script type="text/javascript">
    $(function () {
        function centeringModalSyncer() {
            var w = $(window).width();
            var h = $(window).height();
            var cw = $("#modal-content").outerWidth();
            var ch = $("#modal-content").outerHeight();
            $("#modal-content").css({"left": ((w - cw) / 2) + "px", "top": ((h - ch) / 2) + "px"});
        }

        $('nav#menu').mmenu();

        $("#header").click(function () {
            $("#modal-content,#modal-overlay").fadeOut("slow", function () {
                $('#modal-overlay').remove();
            });
        });

        $("#modal-open").click(function () {
            $(this).blur();    //ボタンからフォーカスを外す
            if ($("#modal-overlay")[0]) return false;
            $("body").append('<div id="modal-overlay"></div>');
            centeringModalSyncer();
            $("#modal-overlay").fadeIn("slow");
            $("#modal-content").fadeIn("slow");

            $("#modal-overlay,#modal-close").unbind().click(function () {
                $("#modal-content,#modal-overlay").fadeOut("slow", function () {
                    $('#modal-overlay').remove();
                });
            });
        });
        //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
        $(window).resize(centeringModalSyncer);
    });
</script>
</body>
</html>

modal.css

@charset "UTF-8";
/* modal.css */

/* ここからデモページ用のコード */
body {
    width: 100%;
    height: 5000px;
    padding: 0;
}

/* ここまでデモページ用のコード */

#modal-content {
    width: 50%;
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #aaa;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 2;
}

#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.75);
}

.button-link {
    color: #00f;
    text-decoration: underline;
}

.button-link:hover {
    cursor: pointer;
    color: #f00;
}

demo.css

@charset "UTF-8";

/* demo.css */
html, body {
    padding: 0;
    margin: 0;
}

body {
    background-color: #fff;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #666;
    position: relative;
    -webkit-text-size-adjust: none;
}

body * {
    text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

h1, h2, h3 {
    font-size: 18px;
}

h4, h5, h6 {
    font-size: 16px;
}

p {
    margin: 0 0 10px 0;
}

a, a:link, a:active, a:visited, a:hover {
    color: inherit;
    text-decoration: underline;
}

nav:not(.mm-menu) {
    display: none;
}

.header,
.content,
.footer {
    text-align: center;
}

.header {
    background: linear-gradient(-135deg, #E4A972, #9941D8);;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 40px;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 50px;
}

footer {
    background: linear-gradient(-135deg, #E4A972, #9941D8); /* 背景色(黒) */
    width: 100%; /* 横の幅を100% */
    height: 30px; /* 縦の幅を120px */
    position: fixed; /* 絶対位置指定することを定義 */
    bottom: 0; /* 絶対位置指定(左0px,下0px) */
    padding: 10px 0; /* 上下に余白を取る */
}

.pen {
    text-align: center;
}

.header.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.footer.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
}

.header a {
    display: block;
    width: 28px;
    height: 18px;
    padding: 11px;
    position: absolute;
    top: 0;
    left: 0;
}

.header a:before,
.header a:after {
    content: '';
    display: block;
    background: #fff;
    height: 2px;
}

.header a span {
    background: #fff;
    display: block;
    height: 2px;
    margin: 6px 0;
}

.content {
    padding: 150px 50px 50px 50px;
}

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jqueryが動かないです。バージョンの違うものを二重で使っているのが問題なのですが解決法がわかりません。

該当のソースコード

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jqueryが動かないです。バージョンの違うものを二重で使っているのが問題なのですが解決法がわかりません。

該当のソースコード

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン