How can i simplify my ugly jQuery? (code included lol)

[kgscott284]

Essentially I am just trying to avoid using duplicate code over and over, I am trying to eliminate the need to do the following for each page on the site…I honestly don’t HAVE to, but i really want to learn how.

$('.contentWrap').hide();

$('.navigation #home').click(function(e) {

e.preventDefault();

// some code here to hide the page if it is open...

$('.contentWrap').load('home.html', function() {

$(this).fadeIn('slow');

});

});​

$('.navigation #about').click(function(e) {

e.preventDefault();

// some code here to hide the page if it is open...

$('.contentWrap').load('about.html', function() {

$(this).fadeIn('slow');

});

});​



.....and so on and so on...

Thanks guys, i really wanna fix that garbage.

[Johnnyb]

Couldn’t you just grab the ID from whatever button’s clicked like so…

$('.navigation a').click(function(e) {

e.preventDefault();

var $self = $(this);

// some code here to hide the page if it is open...

$('.contentWrap').load($self.attr('id') + '.html', function() {

$(this).fadeIn('slow');

});

});​

So long as the anchor id matches the html file name then it should load in that file. I prefer Karl’s method though so that you can link to that page directly.

[Author]

Posts