Guide to utilizing jQuery for random toggling of classes

Question

Guide to utilizing jQuery for random toggling of classes

My objective is to create a mouseover effect on a box that changes its color randomly. Currently, I have managed to achieve this by toggling one class (e.g.

$("#evtTarget").toggleClass(highlighted-2);

). However, I am now attempting to select a random class from a pool of 5 different highlight classes. This means that every time the box is moused over, it will switch to a new random color. Here is my current code:

jQuery

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

function highlight(evt) {
    var number = Math.floor((Math.random() * 5) + 1);
    var colors = "'highlighted'" + "-" + number;
    $("#evtTarget").toggleClass(colors);        
}

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>

I appreciate your patience with me as I am still learning.

Thank you for any assistance provided!

javascript jquery html css

Answer 1

Answer №1

It is recommended to remove all classes and only add the required class in this specific context. Using toggleClass may not work here as it toggles between two classes. Additionally, consider increasing the specificity for div.highlight-1 ... n classes, especially since .box has 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 wish to use different colors than the previous one, you can implement 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

It is recommended to remove all classes and only add the required class in this specific context. Using toggleClass may not work here as it toggles between two classes. Additionally, consider increasing the specificity for div.highlight-1 ... n classes, especially since .box has 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 wish to use different colors than the previous one, you can implement 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 3

Answer №2

Note:

It is recommended to remove the applied classes and encapsulate this feature within a function so that you can invoke it with your preferred event handler such as mouseenter.

Visit this link for demonstration

If you want to take it further and achieve a TRULY random color, consider using a HEX color picker and directly modifying the style through 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());
});

Demo available here

In case you are working with predefined classes and wish to apply a specific number of random classes, you can utilize a switch case like the following example:

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 the practical demonstration by clicking on this link:

Explore more here

Answer 4

Note:

It is recommended to remove the applied classes and encapsulate this feature within a function so that you can invoke it with your preferred event handler such as mouseenter.

Visit this link for demonstration

If you want to take it further and achieve a TRULY random color, consider using a HEX color picker and directly modifying the style through 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());
});

Demo available here

In case you are working with predefined classes and wish to apply a specific number of random classes, you can utilize a switch case like the following example:

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 the practical demonstration by clicking on this link:

Explore more here

Answer 5

Answer №3

You were so close! Just a few adjustments needed:

```
var colors = "'highlighted'" + "-" + number;
```
does not require the inner quotes (apostrophes)
.box should be placed before the .highlighted styles to ensure proper overriding
I updated the class attribute of the div

Below is the revised code:

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

Alternatively, you could implement something like this.

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

Cheers!

Answer 6

You were so close! Just a few adjustments needed:

```
var colors = "'highlighted'" + "-" + number;
```
does not require the inner quotes (apostrophes)
.box should be placed before the .highlighted styles to ensure proper overriding
I updated the class attribute of the div

Below is the revised code:

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

Alternatively, you could implement something like this.

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

Cheers!

Answer 7

Answer №4

Take a look at this demonstration in action:

function emphasize(event) {
  var position = (Math.floor((Math.random() * 5) +  1));
  var shade = "highlighted" + "-" + position;
  $("#eventTarget").attr('class', 'box'); 
  $("#eventTarget").addClass(shade);        
}

$("#eventTarget").on("mouseover mouseleave", emphasize);

You can view the interactive example on JSFiddle: https://jsfiddle.net/2gt9hmmd/3/

Now, let's address some issues.

CSS is case sensitive, so Red !== red.
The background-color of .box is declared after the highlight styles, and because they have the same priority, the .box style will always take precedence over the highlights.
Avoid using unnecessary arrows within the highlight class string.
You don't need to wrap that initial function within another function.
The toggle class method only switches the color on and off, it does not cycle through different colors.
It's best practice to declare functions before you use them for improved code readability.
Avoid generic variable names like `number`, choose descriptive names that reflect the values they hold.

Answer 8

Take a look at this demonstration in action:

function emphasize(event) {
  var position = (Math.floor((Math.random() * 5) +  1));
  var shade = "highlighted" + "-" + position;
  $("#eventTarget").attr('class', 'box'); 
  $("#eventTarget").addClass(shade);        
}

$("#eventTarget").on("mouseover mouseleave", emphasize);

You can view the interactive example on JSFiddle: https://jsfiddle.net/2gt9hmmd/3/

Now, let's address some issues.

CSS is case sensitive, so Red !== red.
The background-color of .box is declared after the highlight styles, and because they have the same priority, the .box style will always take precedence over the highlights.
Avoid using unnecessary arrows within the highlight class string.
You don't need to wrap that initial function within another function.
The toggle class method only switches the color on and off, it does not cycle through different colors.
It's best practice to declare functions before you use them for improved code readability.
Avoid generic variable names like `number`, choose descriptive names that reflect the values they hold.

Guide to utilizing jQuery for random toggling of classes

Answer №1

DEMO

DEMO

Answer №2

Answer №3

Answer №4

Similar questions

Strange alignment issues occurring solely on certain PCs

Implementing AJAX functionality in Codeigniter modulesTo integrate AJAX capabilities within Codeigniter modules

Having trouble modifying the fields in the formArray

Is it possible for me to open an object URL in Internet Explorer?

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

Utilizing AJAX Requests in jQuery Widget Elements for an Interactive Dashboard

Update the state within a different function in Vue.js

The EJS templating system

Navigating to a new page by clicking a button

Error: Attempting to access index '0' of an undefined property in firebase and vuex

Steps to authorize an API request using a token

Solving Cross-Origin Resource Sharing problem in an Express JS application

Passing variables from ExpressJS to JavaScript can be a seamless process

Retrieve the row id from the table by clicking on a button in a modal box using jQuery

Tips for creating responsive jQuery autocomplete list items

Having trouble with installing a React app using npx create-react-app my-app?

Internal server error is causing issues with the AJAX call

What could be causing my jQuery dialogs to lose their draggable functionality?

Locate the closest text to an element within an HTML document

Can the CSS property "float: none;" interfere with the Javascript function "ng-click"?