Please help improve this simple jquery

[Steven Gardner]

I’m looking to improve the way I work with javascript and jQuery by adopting the DRY route.

Can anyone help me clean up this code so its as tight as possible.

$(document).ready(function() {



var addPhoto = $('#addTable');

var searchPhoto = $('#searchTable');

var addlink = $('#addlink');

var searchlink = $('#searchlink');



$(searchPhoto).hide();

$(addlink).hide();



$(searchlink).click(function(){

$(searchPhoto).show();

$(addlink).show();

$(searchlink).hide();

$(addPhoto).hide();

});



$(addlink).click(function(){

$(addPhoto).show();

$(searchlink).show();

$(addlink).hide();

$(searchPhoto).hide();

});

});

[SgtLegend]

It could probably get as simple as

$(function() {

// Hide some stuff!

$('#searchTable, #addlink').hide();



// Loop through the "#addlink" and #searchlink" elements

$.each(, function() {

// Bind a click handler to the current element

$(document.body).delegate('click', this, function() {

// Toggle the following elements

$('#searchTable, #addTable, #searchlink, #addlink').toggle(0);

});

});

});

[Mottie]

I would do this:

$(function() {



// initially hidden

$('#searchTable, #addlink').hide();



$('#addlink, #searchlink').click(function(){

$('#searchlink, #addTable, #searchTable, #addlink').toggle();

});



});

@SgtLegend: I didn’t think delegate is really necessary in this case.

[Author]

Posts