サムネイルをクリックすると指定の場所に大きく画像が表示されるものです。
これだけでも実際に動きますが、もっとJSのコードを短く簡単に書く方法はないでしょうか?
よろしくお願いいたします。
Javascript
1$(function() { 2 var i = 1; 3 4 $("div.hogecol").each(function(){ 5 $(this).addClass('hoge_' + (i++)); 6 7 $('.hoge_1').css('cursor','pointer').find('img').click(function(){ 8 var $thisImg = $(this).attr('src'); 9 $('.hogeImg1').attr({src:$thisImg}); 10 }); 11 $('.hoge_2').css('cursor','pointer').find('img').click(function(){ 12 var $thisImg = $(this).attr('src'); 13 14 $('.hogeImg2').attr({src:$thisImg}); 15 }); 16 $('.hoge_3').css('cursor','pointer').find('img').click(function(){ 17 var $thisImg = $(this).attr('src'); 18 19 $('.hogeImg3').attr({src:$thisImg}); 20 }); 21 }); 22 });
html
1<img src="test1.jpg" alt="" class="hogeImg1"> 2<div class="hogecol"> 3 <img src="sample1.jpg" alt=""> 4 <img src="sample2.jpg" alt=""> 5</div> 6 7<img src="test2.jpg" alt="" class="hogeImg2"> 8<div class="hogecol"> 9 <img src="sample3.jpg" alt=""> 10 <img src="sample4.jpg" alt=""> 11</div> 12 13<img src="test3.jpg" alt="" class="hogeImg3"> 14<div class="hogecol"> 15 <img src="sample5.jpg" alt=""> 16 <img src="sample6.jpg" alt=""> 17</div>
回答3件
あなたの回答
tips
プレビュー