お世話になっております。
タイトルの通り、小さなサムネイルをクリックすると、メインと画像が入れ替わるような実装をしていますが、
Uncaught ReferenceError: img is not defined
のエラーが出てしまいます。
imgという変数が認識されていない考えているのですが、調べても解決できません。
ご教授のほど、よろしくお願いします。
html
1<head> 2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 3 <script src="/assets/js/script.js"></script> 4</head> 5 6#省略 7<div class="rooms__img-wrapper"> 8 <div class="rooms__main-img"> 9 <img src="/assets/images/room-img1.png" alt=""> 10 </div> 11 <ul class="rooms__sub-imgs"> 12 <li class="current"><img src="/assets/images/room-img1.png" alt=""></li> 13 <li><img src="/assets/images/room-img2.png" alt=""></li> 14 <li><img src="/assets/images/room-img3.png" alt=""></li> 15 <li><img src="/assets/images/room-img4.png" alt=""></li> 16 </ul> 17</div>
js
1$(function () { 2 $('.rooms__sub-imgs img').on('click', function () { 3 img = $(this).attr('src'); 4 $('.rooms__sub-imgs li').removeClass('current'); 5 $(this).parent().addClass('current'); 6 $('.rooms__main-img img').fadeOut(50, function () { 7 $('.rooms__main-img img').attr('src', img).on('load', function () { 8 $(this).fadeIn(); 9 }) 10 }) 11 }); 12});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/15 03:05