Question

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

但我没有在我的＃menu_4645908导航链接上复制相同的效果...

我使用＃menu_4645908.red：悬停但没有效果。

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

我知道哪里出错了？

[UPDATE]

这是使用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

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

jQuery有一个addClass()函数，可以完全按照你想要的那样执行
不应在悬停时分配类，而应在页面加载时分配

所以请尝试这样做：（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]; 
}

编辑：正如用户Semicolon在评论中所说，这只适用于你只想在页面加载时分配随机类的情况。

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

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

Javascript随机填充填充底部

1 个答案: