javascript - How to reset background colour after it is changed by jQuery? - Stack Overflow

admin管理员组

文章数量:1291144

First, a jsfiddle... /

//  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.

First, a jsfiddle... http://jsfiddle/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.

• javascript
• jquery

Share Improve this question Follow asked Sep 6, 2011 at 18:10 Don WeiDon Wei 43155 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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', '');

本文标签： javascriptHow to reset background colour after it is changed by jQueryStack Overflow