开发者

How to reset background colour after it is changed by jQuery?

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').remov开发者_JAVA技巧eClass('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.


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


just write this:

$(this).css({'background-color':''});


Just use jQuery's .css() method to remove the background color:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜