Question

Hey guys some help needed with jQuery.

I have 5 icons linked to 5 pictures, so I am fading out icon and fading in larger version.

$('#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" />

How can I use instead of X’s (#iconX , #largeX) , something like icon1 and large1 and find out which exactly icon was chosen and how can I use it later in largeX ? Hopefully it makes any sense, and sorry for question title, did not really know how to name it 🙂

Answer 1

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