Q&A
エラー出てませんか？
前提・実現したいこと
jQuaryでクリックイベントを行いたい。
<li ><a href="#" **id="contact"**>CONTACT</a></li> をクリック後、 <div class="contact-modal-wrapper" **id="modal-show"**>を表示させる。発生している問題・エラーメッセージ
反応なし。
該当のソースコード
html
<div class="header-nav"> <ul> <li><a href="#">TOP</a></li> <li><a href="#">PURODUCT</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li ><a href="#" **id="contact"**>CONTACT</a></li> </ul> </div> </header> <div class="top-wrapper"> <div class="background-imag"></div> </div> <div class="contact-modal-wrapper" **id="modal-show"**> <div class= "modal"> <h2>Contact form</h2> <div class="form-wrapper"> <p>name</p> <form action="#" class="form-text"> <input class="form" type="text" placeholder="name"> </div> <div class="form-wrapper"> <p>Email address</p> <input class="form" type="text" placeholder="Email"> </div> <div class="form-wrapper"> <p>質問、お問い合わせ</p> <textarea></textarea> </div> </form> <div class="form-wrapper"> <input class="btn" type="submit"> </div> </div> </div> </div> </div> javascript $('#contact').click(function(){ $('#modal-show').fadeIN(); });初心者のため基本的な質問で恐縮ですがよろしくお願いいたします。
ご連絡ありがとうございます。
エラーは出ていません。
既にほかの方の回答にあるように、fadeIn()の大文字、小文字の関係かと思いましたが他の可能性かもです。現在提示されてる情報のみだと原因は分かりません。html全文を見せてください。
ありがとうございます。
HTMLは以下の内容です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my site</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="header-wrapper">
<div class="logo">
<img src="./img/siteLogo-pc@2x.png">
</div>
<div class="header-nav">
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">PURODUCT</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li ><a href="#" id="contact">CONTACT</a></li>
</ul>
</div>
</header>
<div class="top-wrapper">
<div class="background-imag"></div>
</div>
<div class="contact-modal-wrapper" id="modal-show">
<div class= "modal">
<h2>Contact form</h2>
<div class="form-wrapper">
<p>name</p>
<form action="#" class="form-text">
<input class="form" type="text" placeholder="name">
</div>
<div class="form-wrapper">
<p>Email address</p>
<input class="form" type="text" placeholder="Email">
</div>
<div class="form-wrapper">
<p>質問、お問い合わせ</p>
<textarea></textarea>
</div>
</form>
<div class="form-wrapper">
<input class="btn" type="submit">
</div>
</div>
</div>
</div>
</div>
<footer>
</footer>
<script type="text/javascript" src="javascipt.js"></script>
</body>
============
css
body {
font-family:"Helvetica Neue",'Noto Sans Japanese', ryo-gothic-plusn, 'りょうゴシック PlusN', "Helvetica", 'Avenir', 'Avenir Next Condensed', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, "Times New Roman", Times, serif, sans-serif;
text-rendering: optimizeLegibility;
}
.top-wrapper{
height: 800px;
}
.background-imag{
background-image:url("../img/main_visual_13-0x0.jpg");
background-size: cover;
height: 800px;
}
.header-wrapper{
overflow: hidden;
height: 80px;
padding-top: 50px;
background-color: rgba(255, 255, 255, 0);
z-index: 10;
position: fixed;
top:0;
}
.logo{
padding:0 90px 0px 95px;
float: left;
}
.logo img{
height: 75px;
width: 270px;
}
.header-nav{
float:right;
margin-right: 70px;
}
li{
list-style: none;
float: left;
font-size: 12px;
letter-spacing: 2px;
padding: 30px 40px 50px 0;
}
li a{
text-decoration: none;
color: white;
}
li::after {
border-bottom: solid 2px white;
bottom: 0;
content: "";
display: block;
transition: all .5s ease;
-webkit-transition: all .3s ease;
width: 0;
}
li:hover::after {
width: 100%;
}
.contact-modal-wrapper{
background-color: rgba(0,0,0,0.4);
position: fixed;
top:0;
left:0 ;
right: 0;
bottom: 0;
display: none;
}
.modal h2{
text-align: center;
}
.form-wrapper{
padding-left: 50px;
}
.modal{
position: absolute;
top: 30%;
left: 36%;
background-color: white;
padding: 20px 0 40px;
border-radius: 10px;
width: 350px;
height: auto;
z-index: 100;
}
.form{
width: 240px;
height: 30px;
border-radius: 2px;
border:2px solid #EEEEEE;
}
textarea{
width: 240px;
height: 60px;
border-radius: 2px;
border:2px solid #EEEEEE;
}
.btn{
width: 140px;
height: 30px;
border-radius: 2px;
border:2px solid #EEEEEE;
background-color:#EEEEEE;
}
==========
javascript
$(function(){
$('#contact').click(function(){
$('#modal-show').fadeIn();
});
)};
質問文は編集できるので、ここにコードを置くのではなく質問文に追記してください。あと、デベロッパーツールにエラーは出ていませんか？確認してみてください。http://eng-entrance.com/javascript-display-error
回答2件
0
ベストアンサー
下記2点かと思います。
)};<script type="text/javascript"全角空白src="javascipt.js"></script>
あとコードは質問文へマークダウン使って書いてください（編集できます）
画像の左下
投稿2019/01/21 08:37
編集2019/01/21 08:43総合スコア955
あと、投稿の為のコピペでのミスと思いますがhtmlの閉じタグも無いです。
マークダウン記述せずに失礼いたしました。
ご指摘いただいた内容を修正しました。
)};→ });
<script type="text/javascript"全角空白src="javascipt.js"></script>→全角空白でが必要という事で問題ありませんか？
全角空白は使っては駄目という意味です。
承知致しました。
0
.fadeInの最後のnは小文字が正しいです（jQuery公式）。
おそらく、コンソールを見れば、「fadeINというメソッドは見つからない」旨のエラーが出ているかと思います。
CDN経由のjQuery参照は、<script src="https://（後略）"のように書いてあれば、ブラウザがインターネットにアクセスできるかどうかに依存します。<script src="//（後略）"だった場合、ファイルから直接アクセスしようとするとfile://へのアクセスになり、失敗します。
投稿2019/01/21 08:16
編集2019/01/21 08:17
総合スコア145192
回答ありがとうございます。
"N"が大文字でしたね。。大変失礼しました。ただ、修正後のアクションは変わりませんでした。。
<head>には以下の内容で記述してあります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
コンソール（F12キーで開ける開発ツールにあります）にも何も出ていませんか？
出ていませんでした。
あなたの回答
tips
プレビュー
