Question

Im trying to cut down some code, basically the following click event is used 10 times with the id ranging from #topNavA – #topNavJ, there’s only 2 parts of the event that ever changes. Can anyone suggest how I can recycle this code for each click? I’ve added in comments of the lines that will change from click event to click event but the rest just stays the same? All advice welcome.

$('#topNavA').click(function() {
    $footerPush.hide();
    $allMultipleElements.hide();

    $('#section, #placement, .mobileControls').show(); // This line will change with different selectors
    $('.mobileControls h1').replaceWith('<h1>Mobilizing Mobile, AL</h1>'); // This line will change with a different header 1
    $('.mobileControls h2').replaceWith('<h2>Overview</h2>'); // This line will change with a different header 2
    $('.menuTitle').removeClass('active');
    $('.lightbox').remove();

    $('#nav li > a').removeClass('active');
    $('#nav li span a').css({
        'color': '#8F8F8F'
    });

    $('#topNav').addClass('active');
    $(this).css({
        'color': '#e8af20'
    });
});

Thanks
Kyle

Answer 1

One option would be to use data. You could have 3 data- attributes on the elements which store the variable data. Something like this:

<a href="..." id="topNavA" class="topNavLink" data-selector="#section, #placement, .mobileControls">something</a>

---

$(".topNavLink").click(function(){
    var selector = $(this).data("selector");

    $(selector).dosomething();
});

And example of the technique: http://jsfiddle.net/mPQfJ/1/