Can I turn this into a switch statement?

[climberusa]

I'm trying to figure out if it would make more sense to turn the following code into a switch statement. How would I write it?

$('#loading').hide(); 

	$('#sub-web-design').click(function(){
		$('#loading').show(); 
		$('#dynamic').load('/what-we-do/web-design', function() {
		$('#loading').hide(); 
		$(this).fadeIn('slow');
		});
		return false;
	});

	$('#sub-graphic-design').click(function(){
		$('#loading').show(); 
		$('#dynamic').load('/what-we-do/graphic-design', function() {
		$('#loading').hide(); 
		$(this).fadeIn('slow');
		});
		return false;
	});

	$('#sub-branding').click(function(){
		$('#loading').show(); 
		$('#dynamic').load('/what-we-do/branding', function() {
		$('#loading').hide(); 
		$(this).fadeIn('slow');
		});
		return false;
	});

	$('#sub-content-management').click(function(){
		$('#loading').show(); 
		$('#dynamic').load('/what-we-do/content-management', function() {
		$('#loading').hide(); 
		$(this).fadeIn('slow');
		});
		return false;
	});
	$('#sub-seo').click(function(){
		$('#loading').show(); 
		$('#dynamic').load('/what-we-do/seo', function() {
		$('#loading').hide(); 
		$(this).fadeIn('slow');
		});
		return false;
	});

I appreciate your help!

[Raffles]

A loop would be better.

var items = ['web-design', 'graphic-design', 'branding', 'content-management', 'seo'];
items.each(function(item) {
  $('#sub-' + item).click(function() {
        $('#loading').show(); 
        $('#dynamic').load('/what-we-do/web-design', function() {
        $('#loading').hide(); 
        $(this).fadeIn('slow');
        });
        return false;
  });
}

Or whatever iteration you prefer, I'm assuming jQuery has an "each" method (looks like you're using jQuery).

[climberusa]

Yes, I'm using jQuery.

That looks much better. the only thing I see now is that the url must change for each variable as well.

[Raffles]

Oh yeah, I forgot about that. So for each line, instead of this, for example:

$('#dynamic').load('/what-we-do/web-design', function() {

change it to this:

$('#dynamic').load('/what-we-do/'+item, function() {

[climberusa]

I'm getting "items.each is not a function" so I've been doing a lot more reading of the jquery docs (i know I should have done that already) and found this solution to almost work.

$('.subnav a').each(function() {
	var itemsLoc = $('.subnav a').attr('href'); //supposed to get the urls
	$(this).bind('click', function(){		
        $('#loading').show();
        $('#dynamic').load(itemsLoc, function() {
        $('#loading').hide();
        $(this).fadeIn('slow');
        });
        return false;
  });
});

the only problem now is it only returns the href of the first list items anchor.

Any ideas what I'm doing wrong here?

[Raffles]

Replace this:

$('.subnav a')

with this:

$(this)

I think it should work, since you're using $(this) elsewhere. "this" refers to the current anchor in the iteration.

Looks like jQuery's each method is very nice since you can use this.

[climberusa]

Ah, yes. Thanks!!! That was it. Thanks a bunch for your help.

So the solution is:

$('.subnav a').each(function() {
var itemsLoc = $(this).attr('href');
	$(this).bind('click', function(){		
        $('#loading').show();
        $('#dynamic').load(itemsLoc, function() {
        $(this).fadeIn('slow');
        $('#loading').hide();
        });
        return false;
  });
});

[Raffles]

You're welcome. I imagine it's also possible to just use this instead of $(this).