javascript - 随机化 Logo 颜色并相应地更改 CSS 链接颜色

Question

此函数随机化站点的 Logo 。我正在尝试制作一个条件语句来相应地更改 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();