jquery更改图像源取决于div点击的ID

Question

我想要点击一个拇指来显示一个更大的图像与预加载程序，然后在加载完成时淡入。

我几乎没有感谢this answer - 这使得不同的图像取决于被点击什么拇指加载 - 和this guide其中挑选出的装载位。

结合使用这两种我有以下脚本：

<script type="text/javascript"> 
    <!-- 
    $(function() { 
     $('img[id^="thumb"]').click(function() { 
     $('#loader').show(); 
     var id = $(this).attr('id').replace('thumb', ''); 
     var img = new Image(); 
     $(img).load(function() { 
      //$(this).css('display', 'none'); 
      $(this).hide(); 
      $('#loader').removeClass('loading').append(this); 
      $(this).fadeIn(); 
     }).attr('src', 'photos/1.jpg'); 
    }); }); 

    //--> 
    </script> 

您将在该.attr源固定一个图像上月底通知。我想要的是，'.jpg'之前的数字取决于拇指的标识（它们被标记为：'thumb1'，'thumb2'等）。

有没有这样做的方法？非常感谢！

ps This answer似乎是接近，但我的问题是，拇指ID似乎为时过早，可以使用这种简单的解决方案。

Answer 1

<script type="text/javascript"> 

    $(function() { 
     $('img[id^="thumb"]').click(function() { 
     var thumbId = $(this).attr('id').substring(5); // assuming the id of the thumb is like "thumb1", "thumb2", ... 
     $('#loader').show(); 
     var id = $(this).attr('id').replace('thumb', ''); 
     var img = new Image(); 
     $(img).load(function() { 
      //$(this).css('display', 'none'); 
      $(this).hide(); 
      $('#loader').removeClass('loading').append(this); 
      $(this).fadeIn(); 
     }).attr('src', 'photos/' + thumbId + '.jpg'); 
    }); }); 


    </script>