Minimising jQuery Code

Question

How would you recommend on minimizing this code? As you can see there is a lot of repeating code.

Im sure many of you may have written code as i have below. But im hoping that there is a way to shorten the amount of code needed.

Any help is much appreciated :)

if(index >= 2 && index <= 5)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market-active.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 6 && index <= 10)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote-active.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 11 && index <= 16)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order-active.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 17 && index <= 21)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in-active.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking.png"  ); 
}
if(index >= 22)
{
    $(".menu-item-2 img").attr( "src" , "images/menu-market.png"  );
    $(".menu-item-3 img").attr( "src" , "images/menu-quote.png"  ); 
    $(".menu-item-4 img").attr( "src" , "images/menu-order.png"  ); 
    $(".menu-item-5 img").attr( "src" , "images/menu-in.png"  ); 
    $(".menu-item-6 img").attr( "src" , "images/menu-taking-active.png"  ); 
}

EDIT:

The images are a menu bar across the bottom of the page. Sort of like a chapter of a book. One button will show as activated (a different image) when you are in that section and the others will not. Also i am using jQuery cycle.

Answer 1

A simple jQuery plugin to do it (this will only work for the first matched element):

$.fn.activate = function () {
   var firstElement = this[0],
       $img,
       src;       

   // Deactivate all the other ones
   $("img").each(function () { // <-- customise this selector to match all images
        $img = $(this);
        src = $img.attr("src"); 
        if (src.indexOf("-active") > -1) {
            $img.attr("src", src.replace("-active", ""));
        }        
    });

   // Activate this one
   firstElement.attr("src", firstElement.attr("src").replace(".png", "-active.png"));  
};

And apply the plugin like this:

if(index >= 2 && index <= 5) {
    $(".menu-item-2 img").activate();
} else if (index >= 6 && index <= 10) {
    $(".menu-item-3 img").activate();
} else if (index >= 11 && index <= 16) {
    $(".menu-item-4 img").activate();
} else if (index >= 17 && index <= 21) {
    $(".menu-item-5 img").activate();
} else if (index >= 22) {
    $(".menu-item-6 img").activate();
}

Answer 2

If possible, I would rewrite this to use CSS classes and background images instead. Something like this:

.menu-item { /* base settings for all menu items */ }

.menu-item.market {
    background-image: url('images/menu-market.png');
}
.menu-item.market.active {
    background-image: url('images/menu-market-active.png');
}

.menu-item.quote {
    background-image: url('images/menu-quote.png');
}
.menu-item.quote.active {
    background-image: url('images/menu-quote-active.png');
}

/* Same for 'order', 'in' and 'taking' */

Now all you have to do in JavaScript is something like this (once):

$(".menu-item-2").addClass('menu-item market');
$(".menu-item-3").addClass('menu-item quote');
$(".menu-item-4").addClass('menu-item order');
$(".menu-item-5").addClass('menu-item in');
$(".menu-item-6").addClass('menu-item taking');

And this (when index changes):

$('.menu-item').removeClass('active');

if(index >= 2 && index <= 5) {
    $('.menu-item.market').addClass('active');
} else if (index >= 6 && index <= 10) {
    $('.menu-item.quote').addClass('active');
} else if (index >= 11 && index <= 16) {
    $('.menu-item.order').addClass('active');
} else if (index >= 17 && index <= 21) {
    $('.menu-item.in').addClass('active');
} else if (index >= 22) {
    $('.menu-item.taking').addClass('active');
}

Taking this approach has two main advantages:

• Separation of logic and presentation. By adding classes you describe what it is, not what it should look like. This makes it easy to go back and, e.g., change an icon.
• Instead of using .menu-item-2, .menu-item-3, et cetera, you could use the menu-item class in HTML (if it can be changed) and iterate over $(.menu-item).

Hope this helps.