SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I turn this into a switch statement? (SOLVED)

    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?

    Code:
    $('#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!
    Last edited by climberusa; Jul 2, 2007 at 12:07.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    A loop would be better.
    Code Javascript:
    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).

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh yeah, I forgot about that. So for each line, instead of this, for example:
    Code:
    $('#dynamic').load('/what-we-do/web-design', function() {
    change it to this:
    Code:
    $('#dynamic').load('/what-we-do/'+item, function() {

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    $('.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?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Replace this:
    Code:
    $('.subnav a')
    with this:
    Code:
    $(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.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, yes. Thanks!!! That was it. Thanks a bunch for your help.

    So the solution is:
    Code:
    $('.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;
      });
    });

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're welcome. I imagine it's also possible to just use this instead of $(this).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •