Javascript onclick menu change background colors

Issue

I have my menu like this:

https://jsfiddle.net/23r4q610/

And my code to change the selected menu button like below:

$('#bluebutton').click(function () {
    $('.testul li').removeClass('selectedred selectedpurple selectedgreen selectedorange');
    $('#bluebutton').addClass('selectedblue');
});

$('#redbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedpurple selectedgreen selectedorange');
    $('#redbutton').addClass('selectedred');
});

$('#purplebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedgreen selectedorange');
    $('#purplebutton').addClass('selectedpurple');
});

$('#greenbutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedorange');
    $('#greenbutton').addClass('selectedgreen');
});

$('#orangebutton').click(function () {
    $('.testul li').removeClass('selectedblue selectedred selectedpurple selectedgreen ');
    $('#orangebutton').addClass('selectedorange');
});

Ofcourse this is bad code since it could be written much shorter. Should I go about this using just numbers so I can do some foreach, or is there a better way to do this?

Solution

This can be condensed by adding a generic click event on all buttons by using [id*="button"]. Then grab the relevant color from the nested anchor.

$('[id*="button"]').click(function(){
    $('.testul li').removeClass();
    $(this).addClass('selected'+$('a',this).attr('class'));
});

or

$('li').click.../*this would be the same as above*/

fiddle

Answered By - depperm