Javascript随机填充底部

Javascript to randomize padding-bottom

本文关键字：底部 填充 随机 Javascript      更新时间：2023-09-26

javascript新手。我试着点击这里的链接:如何在悬停效果上随机分配颜色

但是我没能把同样的效果复制到我的#menu_4645908 nav link…

使用#menu_4645908。红色:悬停但没有效果。

注意:我确实改变了从颜色到填充类的变量，我只是使用了相同的类名，而我的工作，将改变当它的工作..

你知道我哪里出错了吗?

(更新)

这是我使用的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]; 
}

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

  1. jQuery有一个addClass()函数，它做的正是你想要的
  2. 类不应该在悬停时分配，而应该在加载页面
    3. 时分配
(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];
} ​
相关文章：