Javascript 如何使用jQuery在类之间随机切换

我的目标是把鼠标移到一个盒子上，让它随机改变颜色。到目前为止，当我只需要选择一个类来切换时，它是成功的（即，

$（“#evtTarget”）。切换类（突出显示-2）；

）。然而，我试图从5个不同的突出显示类中随机选择一个类。这样，每次我把鼠标移到盒子上，我都希望它随机选择一种不同的颜色来改变。以下是我目前的代码：

jQuery

$(function() {
    $("#evtTarget").on("mouseover mouseleave", highlight);                
});

function highlight(evt) {
    $("#evtTarget").toggleClass(colors);        

    var number=(Math.floor((Math.random() * 5) +  1));
    var colors = "'highlighted'" + "-" + number;
}

CSS

.highlighted-1 {
    background-color:Blue;
}
.highlighted-2 {
    background-color:Purple;
}
.highlighted-3 {
    background-color:Green;
}
.highlighted-4 {
    background-color:Pink;
}
.highlighted-5 {
    background-color:Red;
}
.box{
    border: solid 1px black;
    height: 300px;
    width: 300px;
    background-color: gray;
}

HTML

<div id="evtTarget" class="box"><p>Random Highlight</p></div>

随机突出显示

请原谅我的无知，我是新来的

---

谢谢你的帮助

尝试删除所有类并在此上下文中添加所需类，因为toggleClass无法在此处实现，因为它将在两个类之间切换。同时增加

div.highlight-1的特异性。。。n

类。因为.box有一个属性

背景色

$(function(){
  $("#evtTarget").on("mouseover mouseleave", highlight);                
});

function highlight() {
  var number= Math.floor(Math.random() * 5) + 1;
  var colors = "highlighted-" + number;
  $(this).removeClass().addClass('box ' + colors);        
}

如果您想设置不同的颜色与以前的颜色相比，那么只需执行一个简单的递归

$(function() {
  $("#evtTarget").on("mouseover mouseleave", highlight);
});

function highlight(e, $this) {
  $this = $this || $(this);
  var colors = "highlighted-" + getNumber();
  if ($this.hasClass(colors)) {
    highlight(null, $this);
    return;
  }
  $this.removeClass().addClass('box ' + colors);
}

function getNumber() {
  return Math.floor(Math.random() * 5) + 1;
}

编辑：

如注释中所述，您需要删除应用的类并将整个功能包装在函数中，以便可以在您喜欢的任何事件处理程序上调用它（

mouseenter

）

即使您想要真正的随机颜色，也可以通过简单地应用十六进制颜色选择器而不使用类，而是通过javascript更改样式本身来进一步扩展它：

var $foo = $('#foo');
function getRandomColor() {
  var length = 6;
  var chars = '0123456789ABCDEF';
  var hex = '#';
  while(length--) hex += chars[(Math.random() * 16) | 0];
  return hex;
}
$foo.mouseenter(function(){
    $(this).css('background-color', getRandomColor());
});

---

如果您使用的是预定义类，以及您希望应用的指定数量的随机类，则可以使用如下切换情况：

var rand = Math.floor((Math.random() * 5) + 1);
var element = $('#foo');
switch(rand){
  case 1:
    element.addClass('blue');
    break;
  case 2:
    element.addClass('pink');
    break;
  case 3:
    element.addClass('red');
    break;
  case 4:
    element.addClass('green');
    break;
  case 5:
    element.addClass('yellow');
    break;
}

在此处查看：

---

你非常接近。我只做了几个调整：

• var colors=“'highlighted'”+“-”+数字不需要内部引号（撇号）

• .box

  需要位于突出显示的

  样式之前，因为它需要被它们覆盖

• 我设置了

  div的
  class
  属性

以下是更新的代码：

$（函数（）{
$（#evtTarget”）。在（“mouseover mouseleave”，突出显示）；
});
功能突出显示（evt）{
变量数=（Math.floor（（Math.random（）*5）+1））；
var colors=“突出显示的”+“-”+数字；
$（this.attr（'class'，'box'+颜色）；
}
.盒子{
边框：实心1px黑色；
高度：300px；
宽度：300px；
背景颜色：灰色；
}
.1-1{
背景颜色：蓝色；
}
.1-2{
背景颜色：紫色；
}
.1-3{
背景颜色：绿色；
}
.1-4{
背景颜色：粉红色；
}
.1-5{
背景色：红色；
}
随机突出显示

以下是工作示例：

function highlight(evt) {
  var index = (Math.floor((Math.random() * 5) +  1));
  var color = "highlighted" + "-" + index;
  $("#evtTarget").attr('class', 'box'); // this resets the class back to box
  $("#evtTarget").addClass(color);        
}

$("#evtTarget").on("mouseover mouseleave", highlight);

和小提琴

现在，为错误

CSS区分大小写，所以红色！==红色

.box背景色在高光之后声明，并且具有相同的优先级，.box样式始终覆盖高光

在高亮显示类字符串中不需要这些额外的箭头

您不需要将第一个函数包装到另一个函数中

Toggle类只是添加和删除相同的颜色，它是开/关的

最好在上面使用它们声明函数，这样可以提高可读性

尽量不要用数字这样的词来表示变量名，当所有变量都有意义并描述它们存储的内容时会更好。这不是错误，只是会让你的生活更轻松

---

如果您正在使用此方法，则需要在运行此方法之前删除所有类，否则您将无法一次多次循环使用颜色，因为确切的原因，还包括mouseenter函数。这非常完美，谢谢！我喜欢完全随机化。非常简单，效果非常好。再次感谢。值得注意的一点是，用这个可以连续两次使用相同的颜色。如果他想让它总是改变颜色，你需要将它与当前颜色进行比较。@Tricky12解决了这个问题。这很有效，谢谢。有什么原因可能有点慢吗？它不会一直变化，有时会在某个颜色上停留一段时间。我尝试将可能的颜色选项增加三倍，以防出现随机化问题，但这似乎没有帮助。再次感谢。@EFH这就是我提供第二个代码的原因。查看的演示it@RajaprabhuAravindasamy对不起，一开始没看到，谢谢！