随机化徽标颜色并相应更改 CSS 链接颜色

Question

此功能随机化网站的徽标。我正在尝试做一个条件语句来相应地改变 a:hover 颜色。

如果选择蓝色，a:hover, .current-menu-item 应该有color: blue;。

实现这一点的最佳方法是什么？

function logoChange() { 
var description = new Array ();
description[0] = "images/logos/blue.png";
description[1] = "images/logos/green.png";
description[2] = "images/logos/orange.png";
description[3] = "images/logos/purple.png";
description[4] = "images/logos/red.png";
description[5] = "images/logos/yellow.png";
var size = description.length
var x = Math.floor(size*Math.random())
document.getElementById('logo').src=description[x];    
}
window.onload=logoChange;


if (logo blue is chosen)
  {
  <style>a:hover, .current-menu-item {color: blue;}</style>
  }

elseif (logo green is chosen)
  {
  <style>a:hover, .current-menu-item {color: green;}</style>
  }

and so on...

Answer 1

我所做的是创建了一个包含所有可能颜色的数组。注意颜色索引如何与描述索引匹配。所以如果变量x 是3，那么purple.png 就是logo，purple 就是css 的紫色。

function logoChange() { 
var description = new Array ();
description[0] = "images/logos/blue.png";
description[1] = "images/logos/green.png";
description[2] = "images/logos/orange.png";
description[3] = "images/logos/purple.png";
description[4] = "images/logos/red.png";
description[5] = "images/logos/yellow.png";
var size = description.length;
var x = Math.floor(size*Math.random());
document.getElementById('logo').src=description[x];

var colors = ['blue', 'green', 'orange', 'purple', 'red', 'yellow'];

var thecolor = colors[x];

$('.current-menu-item').css({color: thecolor});

$("a").hover(function () {
    $(this).css({
        color: thecolor
    });
}, function () {
    $(this).css({
        color: 'blue'   // change 'blue' to whatever the normal color is without hover
    });
});

}

logoChange();