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将是徽标，紫色将是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();

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

1 个答案: