Question

I know this is a popular topic and I’ve read some other articles on substring selection in jQuery, but can’t figure out how to get my specific example working more efficiency and any advice would be appreciated.

I have the following code:

$('#plan-gallery').click(function(){
    $('#gallery').addClass('active-slide') 
    $('#gallery').fadeIn() 
});

$('#plan-ensuite').click(function(){
    $('#ensuite').addClass('active-slide') 
    $('#ensuite').fadeIn() 
});

$('#plan-bedroom').click(function(){
    $('#bedroom').addClass('active-slide') /* This code line is redundant */
    $('#bedroom').fadeIn() /* This code line is also redundant */
});

This kind of code is repeated many times throughout my script.js and I’d like to get rid of it’s redundancy.

Can any jQuery wizards help make my code better?

Thanks in advance

Answer 1

Assuming that the id of the slide starts after the first - in the slide button id:

$('#plan-gallery,#plan-ensuite,#plan-bedroom').click(function(){
   $('#' + this.id.substring(this.id.indexOf('-') + 1)).addClass('active-slide').fadeIn();
});