Minimize jQuery code

Question

How do you recommend minimizing this code? As you can see, there are many duplicate codes.

I am sure that many of you can write code, as I said. But I hope there is a way to reduce 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:

Images are a menu bar at the bottom of the page. Sounds like a chapter to a book. One button will appear as activated (another image) when you are in this section, while others will not. I also use jQuery loop.

Answer 1

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

 .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'); } 

This approach has two main advantages:

• Separation of logic and presentation. By adding classes, you describe what it is and not what it should look like. This makes it easy to return and, for example, change the icon.
• Instead of using .menu-item-2 , .menu-item-3 , etc. you can use the menu-item class in HTML (if you can change it) and iterate over $(.menu-item) .

Hope this helps.

Answer 2

A simple jQuery plugin for this (this will only work for the element of the first matching 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 as follows:

 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 3

A bit confusing, but should do the job:

 var current = 0, src, images = ['','','market','quote','order','in','taking'], active = [0,0,2,2,2,2,3,3,3,3,3,4,4,4,4,4,4,5,5,5,5,5,6]; if(active[index]) { current = active[index]; } else if(index > active.length) { current = 6; } for(var i=2; i<7; i++) { src = "images/menu-" + images[i]; if(i == current) { src += "-active"; } src += ".png"; $(".menu-item-" + i + " img").attr("src", src); } 

Answer 4

You can start with this:

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

Answer 5

Note that the following expression will give you the number of the menu item that the active image should use

 Math.floor((index-2)/5+2); 

Then you can simplify the rest of the code.

 $(".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.png"); var active = Math.floor((index-2)/5+2), $active_menu = $(".menu-item-"+active+" img"); $active_menu.attr("src", $active_menu.attr("src").replace(".png", "-active.png")); 

Answer 6

1: Add id="i" to all your menu items, set the css class attribute to class="menu-item"

2

 $('.menu-item').click(function () { $('.menu-item').each(function(){ /* Unselected picture */ $(this img).attr('src', 'images/menu-' + $(this).attr('id') + '_unselected.png'); }); /* selected picture */ $(this img).attr('src', 'images/menu-' + $(this).attr('id') + '_selected.png'); });