Question

我的目标是将鼠标悬停在一个盒子上，让它随机改变颜色。到目前为止，我只需要选择一个类来切换（即$("#evtTarget").toggleClass(highlighted-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>

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

感谢您的帮助！

Answer 1

尝试删除所有类并在此上下文中添加所需的类，因为在此处无法实现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);        
}

DEMO

如果您想要设置与之前颜色相比的不同颜色，那么只需进行简单的递归。

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

DEMO

Answer 2

编辑：

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

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

你可以进一步扩展它，即使你想要一个TRULY随机颜色，只需应用一个HEX颜色选择器而不是使用类，但是通过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/

Answer 3

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

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

div

这是更新后的代码：

＆＃13;

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

＆＃13;

另一种方法是这样的。

＆＃13;

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

＆＃13;

干杯！

Answer 4

以下是工作示例：

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/

现在，对于错误。

CSS区分大小写，所以Red！== red。
.box background-color在突出显示之后声明，并且具有相同的优先级，.box样式始终覆盖突出显示。
您不需要突出显示类字符串中的额外箭头。
您不需要将第一个功能包装在另一个功能中。
切换课程只需添加和删除相同的颜色，即打开/关闭。
使用它们声明上述功能更好，它提高了可读性
尽量不要使用数字这样的词来表示变量名称，当所有变量都有意义并描述它们存储的内容时，它会好得多。这不是一个错误，只会让你的生活更轻松。

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

4 个答案:

DEMO

DEMO