No products in the cart.
Forum Replies Created
Viewing 1 post (of 1 total)
- Posts
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Difficulty Scale</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <style> .difficulty-item { /* Add your styling for difficulty items here */ display: inline-block; width: 20px; height: 20px; background-color: #ccc; margin: 2px; } .active { /* Add your styling for active difficulty items here */ background-color: #00f; /* Change the background color for active items */ } </style> </head> <body> <div class='difficulty-wrapper' data-difficulty='1'> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> </div> <div class='difficulty-wrapper' data-difficulty='4'> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> </div> <script> $(document).ready(function() { // Iterate through each difficulty-wrapper $('.difficulty-wrapper').each(function() { // Get the data-difficulty attribute value var difficulty = $(this).data('difficulty'); // Find the corresponding difficulty-item elements and add the "active" class to them $(this).find('.difficulty-item:lt(' + difficulty + ')').addClass('active'); }); }); </script> </body> </html>This script uses jQuery to iterate through each .difficulty-wrapper element, retrieves the data-difficulty value, and adds the "active" class to the corresponding number of .difficulty-item elements within that wrapper. The :lt() selector is used to select elements with an index less than the specified value (in this case, the difficulty level).
Viewing 1 post (of 1 total)