如何在jQuery更改后重置背景颜色?

时间:2011-09-06 18:10:11

标签: javascript jquery

首先,一个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]);

现在问题,

首先,此代码的工作方式几乎与我希望的方式相同,用户点击链接,所选颜色应用于链接文本,从其他文本中移除。链接的背景设置为颜色数组中的随机颜色。凉。

我想知道的是......我如何制作它以便从非选定链接中删除随机设置的背景颜色(即。只有.selected类的链接具有背景颜色。)< / p>

EXTRA CREDIT

如果连续两次使用相同的背景颜色,则为Bonas积分。 (即如果单击一个设置为黄色,则单击两个除了黄色之外的任何其他颜色。

3 个答案:

答案 0 :(得分:2)

这将满足您的所有要求(包括奖金)。

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

答案 1 :(得分:1)

只需使用jQuery的.css()方法删除背景颜色:

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

答案 2 :(得分:1)

写下这个:

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