How to use jQuery to randomly toggle between classes

Question

My goal is to mouse over a box and have it change color randomly. It's successful so far when I only have to choose one class to toggle ( i.e. $("#evtTarget").toggleClass(highlighted-2);). However, I'm trying to choose a random class from 5 different highlight classes. That way, every time I mouse over the box I want it to pick a random different color to change to. Here's my code so far:

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>

Please forgive the ignorance, I'm new here.

Thanks for any and all help!

Answer 1

Try to remove all the classes and add required class at this context, since toggleClass cannot be implemented here as it will toggle between 2 classes. Also increase the specificity for div.highlight-1 ... n classes. Because .box is having a property 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

If you want to set different colors comparing with previous color then just do a simple recursion.

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

Edit:

As noted in the comments, you will want to remove the classes applied and wrap this entire feature inside of a function so you can call it on whatever event handler you prefer (mouseenter).

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

You could expand it further even if you want a TRULY random color by simply applying a HEX color picker and not using classes, but altering the style itself via 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/

---

If you're using predefined classes, and a specified amount of random classes you'd want to apply, you could use a switch case like this:

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

View Here:

https://jsfiddle.net/rbyoj47j/