Javascript随机填充底部

Question

这里是javascript的新手。我试着点击这里的链接： How to randomly assign a color on hover effect

但我未能在我的 #menu_4645908 导航链接上复制相同的效果...

我使用 #menu_4645908.red:hover 但没有效果。

注意：我确实将类的变量从颜色更改为填充，我只是在工作时使用了相同的类名，当它工作时会改变..

知道我哪里出错了吗？

[更新]

这是我使用的css，从线程复制，

#menu_4645908.green:hover { color: #1ace84; }
#menu_4645908.purple:hover { color: #a262c0; }
#menu_4645908.teal:hover { color: #4ac0aa; }
#menu_4645908.violet:hover { color: #8c78ba; }
#menu_4645908.pink:hover { color: #d529cd; }

这是 javascript

$(document).ready(function() { 
    $("a").hover(function(e) { 
        var randomClass = getRandomClass(); 
        $(e.target).attr("class", randomClass); 
    }); 
}); 

function getRandomClass() { 
   //Store available css classes 
   var classes = new Array("green", "purple", "teal", "violet", "pink"); 

   //Give a random number from 0 to 5 
   var randomNumber = Math.floor(Math.random()*6); 

   return classes[randomNumber]; 
} 

Answer 1

您的代码中似乎有两个问题：

1. jQuery 有一个 addClass() 函数，可以完全满足您的需求
2. 不应在悬停时分配该类，而应在页面加载时分配该类

所以试试这个吧：(JsFiddle)

$(document).ready(function() {
  $.each($("a"), function(index, element){
    $(this).addClass(getRandomClass());
  });
});

function getRandomClass() { 
 //Store available css classes 
 var classes = new Array("green", "purple", "teal", "violet", "pink");
 //Give a random number from 0 to 5
 var randomNumber = Math.floor(Math.random()*6); 
 return classes[randomNumber]; 
}

编辑：正如用户分号在 cmets 中所说，这仅在您只想在页面加载时分配随机类时才有效。

在这种情况下，您可以每次只指定一种特定的颜色：

$(document).ready(function() {
  ("a").hover(function(){
    $(this).css('color', getRandomColor());
  }, function(){
    $(this).css('color', ''); // Reverts to default color
  });
}); 

function getRandomColor() {
 var colors = new Array("#1ace84", "#a262c0", "#4ac0aa", "#8c78ba", "#d529cd");
 var randomNumber = Math.floor(Math.random()*colors.length); 
 return colors[randomNumber];
} ​