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

尝试删除所有类并在此上下文中添加所需的类，因为 toggleClass 无法在此处实现，因为它将在 2 个类之间切换。还要增加div.highlight-1 ... n类的特异性。因为 .box 具有属性background-color .

$(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）。

https://jsfiddle.net/rbyoj47j/2/

即使你想要一个真正的随机颜色，你也可以通过简单地应用一个十六进制颜色选择器而不使用类，而是通过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());
});

https://jsfiddle.net/rbyoj47j/3/

如果您使用的是预定义的类，并且要应用指定数量的随机类，则可以使用如下所示的开关情况：

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

在这里查看：

https://jsfiddle.net/rbyoj47j/

你非常接近。 我只做了一些调整：

• var colors = "'highlighted'" + "-" + number;不需要内引号（撇号）
• .box需要排在.highlighted样式之前，因为它需要被它们覆盖
• 我设置了div的class属性

以下是更新的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#evtTarget").on("mouseover mouseleave", highlight);
  });
  function highlight(evt) {
    var number=(Math.floor((Math.random() * 5) +  1));
    var colors = "highlighted" + "-" + number;
    $(this).attr('class', 'box ' + colors);
  }
</script>
<style type='text/css'>
  .box {
    border: solid 1px black;
    height: 300px;
    width: 300px;
    background-color: gray;
  }
  .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;
  }
  
</style>
<div id="evtTarget" class="box"><p>Random Highlight</p></div>

另一种方法是这样的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#evtTarget").on("mouseover mouseleave", highlight);
  });
  var colors = ['blue', 'purple', 'green', 'pink', 'red'];
  function highlight(evt) {
    var number= Math.floor(Math.random() * 5);
    $(this).attr('style', 'background-color:' + colors[number]);
  }
</script>
<style type='text/css'>
  .box{
    border: solid 1px black;
    height: 300px;
    width: 300px;
    background-color: gray;
  }
</style>
<div id="evtTarget" class="box"><p>Random Highlight</p></div>

干杯！

下面是工作示例：

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);

和小提琴https://jsfiddle.net/2gt9hmmd/3/

现在，对于错误。

1. CSS 区分大小写，所以 Red ！== 红色。
2. .box 背景颜色在突出显示之后声明，并且具有相同的优先级，.box 样式始终覆盖突出显示。
3. 突出显示类字符串中不需要这些额外的箭头。
4. 您不需要将第一个函数包装在另一个函数中。
5. 切换类只是添加和删除相同的颜色，它是开/关的。
6. 最好使用它们声明上面的函数，它提高了可读性
7. 尽量不要使用像数字这样的词作为变量名称，当所有变量都有意义并描述它们存储的内容时，情况会好得多。这不是错误，只会让你的生活更轻松。