サムネイルをクリックすると画像が切り替わるjQueryです。
同じページに複数設置したいのですが、コードを短く簡潔にまとめたいです。
ご教示ください。宜しくお願いします。
HTML
1<div class="mainimage1"> 2<img src="/gazou01.jpg" alt="画像1"> 3</div> 4 <div class="thumbnail1"> 5 <img src="gazou01.jpg" alt="画像1"> 6 <img src="gazou02.jpg" alt="画像2"> 7 <img src="gazou03.jpg" alt="画像3"> 8</div> 9 10<div class="mainimage2"> 11<img src="/gazou04.jpg" alt="画像4"> 12</div> 13 <div class="thumbnail2"> 14 <img src="gazou04.jpg" alt="画像5"> 15 <img src="gazou05.jpg" alt="画像6"> 16 <img src="gazou06.jpg" alt="画像7"> 17</div>
jQuery
1$(function(){ 2 $('.thumbnail1 img').click(function(){ 3 var $thisImg = $(this).attr('src'); 4 var $thisAlt = $(this).attr('alt'); 5 $('.mainimage1 img').attr({src:$thisImg,alt:$thisAlt}); 6 }); 7 $('.thumbnail2 img').click(function(){ 8 var $thisImg = $(this).attr('src'); 9 var $thisAlt = $(this).attr('alt'); 10 $('.mainimage2 img').attr({src:$thisImg,alt:$thisAlt}); 11 }); 12});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/10 08:43