質問させてください。
今、ボタンを押すと画像が切り替わるプログラムをjqueryで書いていまして、うまく動作はしたものの、以下のような数字が違うだけの複数のイベントをもう少しシンプルにできればなと思い、1つにまとめる方法を探してみたのですがなかなか見つかりませんでした。もし良い方法がありましたらどなたかご教授いただけないでしょうか。
javascript
1$(function() { 2 $('.btn1').on('click', function() { 3 test(1); 4 }); 5 $('.btn2').on('click', function() { 6 test(2); 7 }); 8 $('.btn3').on('click', function() { 9 test(3); 10 }); 11 $('.btn4').on('click', function() { 12 test(4); 13 }); 14 $('.btn5').on('click', function() { 15 test(5); 16 }); 17});
htmlは以下のような形になっております。(質問用に少し簡明にしてあります。)
html
1<img class="btn1" src="btn.png"> 2<img class="btn2" src="btn.png"> 3<img class="btn3" src="btn.png"> 4<img class="btn4" src="btn.png"> 5<img class="btn5" src="btn.png">
実際のソースはけっこう煩雑になっているのですが以下に記載させていただきます。
実はボタンをクリックではなく、サムネイルをマウスオーバーで、拡大部に画像とテキストを表示させるようにしています。ここのイベント部分が少し重複気味だなと思い、質問させていただきました。
javascript
1$(function(){ 2 $('.js-gallery').each(function() { 3 var $_self = $(this); 4 5 function DisplayImage(num) { 6 var img_full = $_self.find('.js-change-img' + num + ' img').attr('src'); 7 $_self.find('.js-gallery-target img').fadeOut('fast', function() { 8 $_self.find('.js-gallery-target img').attr('src', img_full).fadeIn(); 9 for (var i = 1; i <= 8; i++) { 10 $_self.find('.js-change-txt' + i).hide(); 11 } 12 $_self.find('.js-change-txt' + num).fadeIn(); 13 }); 14 } 15 16 $_self.find('.js-change-img1 img').mouseover(function() { 17 DisplayImage(1); 18 }); 19 $_self.find('.js-change-img2 img').mouseover(function() { 20 DisplayImage(2); 21 }); 22 $_self.find('.js-change-img3 img').mouseover(function() { 23 DisplayImage(3); 24 }); 25 $_self.find('.js-change-img4 img').mouseover(function() { 26 DisplayImage(4); 27 }); 28 $_self.find('.js-change-img5 img').mouseover(function() { 29 DisplayImage(5); 30 }); 31 $_self.find('.js-change-img6 img').mouseover(function() { 32 DisplayImage(6); 33 }); 34 $_self.find('.js-change-img7 img').mouseover(function() { 35 DisplayImage(7); 36 }); 37 $_self.find('.js-change-img8 img').mouseover(function() { 38 DisplayImage(8); 39 }); 40 }); 41});
html
1<div class="js-gallery"> 2 <!-- 拡大部 --> 3 <div class="c-gallery__large js-gallery-target"> 4 <div class="c-gallery__large-img"><img src="images/common/sample/sample01.jpg" alt="" style="display: inline;"></div> 5 6 <!-- テキスト --> 7 <div class="js-change-txt1" style="display: block;">テキスト1テキスト1テキスト1テキスト1</div> 8 <div class="js-change-txt2" style="display: none;">テキスト2テキスト2テキスト2テキスト2</div> 9 <div class="js-change-txt3" style="display: none;">テキスト3テキスト3テキスト3テキスト3</div> 10 <div class="js-change-txt4" style="display: none;">テキスト4テキスト4テキスト4テキスト4</div> 11 <div class="js-change-txt5" style="display: none;">テキスト5テキスト5テキスト5テキスト5</div> 12 <div class="js-change-txt6" style="display: none;">テキスト6テキスト6テキスト6テキスト6</div> 13 <div class="js-change-txt7" style="display: none;">テキスト7テキスト7テキスト7テキスト7</div> 14 <div class="js-change-txt8" style="display: none;">テキスト8テキスト8テキスト8テキスト8</div> 15 </div> 16 17 18 <!-- サムネイル --> 19 <div class="c-gallery__thumbs"> 20 <div class="js-change-img1"><img src="images/sample01.jpg" alt=""></div> 21 <div class="js-change-img2"><img src="images/sample02.jpg" alt=""></div> 22 <div class="js-change-img3"><img src="images/sample03.jpg" alt=""></div> 23 <div class="js-change-img4"><img src="images/sample04.jpg" alt=""></div> 24 <div class="js-change-img5"><img src="images/sample05.jpg" alt=""></div> 25 <div class="js-change-img6"><img src="images/sample06.jpg" alt=""></div> 26 <div class="js-change-img7"><img src="images/sample07.jpg" alt=""></div> 27 <div class="js-change-img8"><img src="images/sample08.jpg" alt=""></div> 28 </div> 29 30</div>
低レベルな質問ですみません。
よろしくお願いいたします。
回答4件
あなたの回答
tips
プレビュー