Multi-level image slider

Question

Here is my code I'm working with:

$('#slider_1').click( function change_slider(){
 $('#slider_1').addClass('current_tab').siblings('.current_tab').removeClass('current_tab')
 $('#cart_slider_1').show().siblings().hide();
 $('#cart_slider_1').addClass('current').siblings('.current').removeClass('current');
 numItems = $('.current .cart_slide').length;
 sliderwidth = numItems * swidth;
 $('.cart_slides').css({'left': 0, 'width': sliderwidth});
 numloop = numItems-1;
 last_slide = sliderwidth - swidth;
 i=0;
});
$('#slider_2').click( function change_slider(){
 $('#slider_2').addClass('current_tab').siblings('.current_tab').removeClass('current_tab')
 $('#cart_slider_2').show().siblings().hide();
 $('#cart_slider_2').addClass('current').siblings('.current').removeClass('current');
 numItems = $('.current .cart_slide').length;
 sliderwidth = numItems * swidth;
 $('.cart_slides').css({'left': 0, 'width': sliderwidth});
 numloop = numItems-1;
 last_slide = sliderwidth - swidth;
 i=0;
});

It repeats 6 more times, with incrementing #slider numbers and #cart_slider numbers.

I want to make this into one set, and run the variable sets through it. #slider_1, #slider_2, #slider_3, etc... and #cart_slider_1, #cart_slider_2, #cart_slider_3, etc...

The current code works fine; I just want to simplify / condense it.

Answer 1

$('#slider_1').click( function change_slider(){

You don't have to name the function when you pass it to an event handler.

$('#slider_1').click( function() {

An anonymous function is sufficient.

$('#slider_1').addClass('current_tab').siblings('.current_tab').removeClass('current_tab')

This seems to be missing a ; at the end.

But neither of those is what you asked:

var change_slider = function() {
 $(this).addClass('current_tab').siblings('.current_tab').removeClass('current_tab');
 $('#cart_'+$(this).attr('id')).show().siblings().hide();
 $('#cart_'+$(this).attr('id')).addClass('current').siblings('.current').removeClass('current');
 numItems = $('.current .cart_slide').length;
 sliderwidth = numItems * swidth;
 $('.cart_slides').css({'left': 0, 'width': sliderwidth});
 numloop = numItems-1;
 last_slide = sliderwidth - swidth;
 i=0;
};
$('#slider_1').click( change_slider );
$('#slider_2').click( change_slider );
$('#slider_3').click( change_slider );
$('#slider_4').click( change_slider );
$('#slider_5').click( change_slider );
$('#slider_6').click( change_slider );

The basic idea is that we assign an anonymous function to a variable and then pass that to the various click handlers. In order to make this work, we make use of the fact that when the function is called, it knows what object called it: this.

 $(this).addClass('current_tab').siblings('.current_tab').removeClass('current_tab');
 $('#cart_'+$(this).attr('id')).show().siblings().hide();
 $('#cart_'+$(this).attr('id')).addClass('current').siblings('.current').removeClass('current');

In the first line, we can access our slider object directly. The cart_slider is a little more complicated, so we rely on the fact that it just adds a prefix to the id of the slider object. We get the id by calling $(this).attr('id') and use string concatenation to form the id of the cart_slider.

Note: I haven't tried to run this. Apologies in advance if I missed the syntax somewhere.

• Xeuce: Thank you! that took my script from 127 lines to 60, and it worked like a charm. I couldnt figure out how to incorporate the "this" and 2 variables, but concatenation did it. Good choice in variable names eh?
• zord: One advantage of using named functions as event handlers is more readable stack traces.