Question

First, a jsfiddle…
http://jsfiddle.net/therocketforever/jYba3/11/

//  Highlight selected linker link & set all others to default.  
    $('a.linker').click(function(){
    $(this).addClass('selected');
    $(this).parent('li').siblings().find('.selected').removeClass('selected');

//  Selects a random colour from the 'colors' array by getting a random value 
//  between 0 and the length of the color array.   
    rand = Math.floor(Math.random()*colors.length);
    $(this).css("background-color", colors[rand]);

Now a Question,

Firstly this code works almost exactly the way that I would like it to, A user clicks a link, the selected colour is applied to the link text, removed from the others & the background of the link is set to a random color from the array of colours. Cool.

What I would like to know is… How would I make it so that the randomly set background colour is removed from the non selected links (ie. Only the link with the .selected class has the background colour.)

EXTRA CREDIT

Bonas points if the same background colour is never used twice in a row. (ie. If click one sets to yellow, click two is any other colour except yellow.

Answer 1

This’ll meet all your requirements (bonus included).

$(document).ready(function(){

//  Colours for links
var colors = ["#fff766","#66cef5","#bd7ebc","#66cc66"];

$("a.linker").click(function(){        
    var $this = $(this).addClass("selected");

    $this.parent('li').siblings().find('.selected')
        .removeClass('selected').css("background-color", "");

    var num = $this.data("colorNum"),
        rand = num;

    while (num === rand) {
        rand = Math.floor(Math.random()*colors.length);
    }

    $this.css("background-color", colors[rand])
        .data("colorNum", rand);
  });
});