jQuery;幫助選擇器

Question

嘿傢伙一些幫助需要與jQuery。

我有5個圖標鏈接到5張圖片，所以我淡出圖標和褪色的大版本。

$('#iconX').click(function() { 
    $('.iconSet').fadeOut('300'); 
    $('#largeX').delay('300').fadeIn('300'); 
}); 

<!-- Small images --> 

<a href="#" ><img src="images/icon1.png" class="smallPics" id="icon1"/></a> 
<a href="#"><img src="images/icon2.png" class="smallPics" id="icon2"/></a> 


<!-- Large images --> 

<img src="images/large1.png" class="largePics" id="large1" /> 
<img src="images/large2.png" class="largePics" id="large2" /> 

如何使用，而不是X的（#iconX，#largeX），像ICON1和large1，並找出哪些選擇究竟圖標，我怎麼能在largeX以後使用它？希望它是有道理的，並且對於問題標題感到抱歉，並不知道如何命名它:)

Answer 1

$('img[id^="icon"]').click(function() { 
    $(this).fadeOut('300'); 
    var largeId = this.id.replace('icon', 'large'); 
    $('#'+ largeId).delay('300').fadeIn('300'); 
});