3

这里是javascript的新手。我尝试点击此处的链接： 如何在悬停效果上随机分配颜色

但我未能在我的#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]; 
}
4

1 回答 1

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

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

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

$(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];
} ​
于 2012-12-25T23:39:45.880 回答