Instructions on how to assign a class number to a div matching the cookie number

Cookie:

$(document).ready(function(){

    //hide all divs for the purpose of this example, you should have them hidden with your CSS

    //$('.picture.1').hide();
    //check if the cookie is already set
    if ($.cookie("currentDiv") === undefined){
            $.cookie("currentDiv", 1);
    } else {
            //get and increment value, assuming we have only 8 divs     

            var numValue = parseInt($.cookie("currentDiv"));
            numValue = numValue + 1;
            if (numValue > 8){
            //restart to 1
                $.cookie("currentDiv", 1);
            }
            else {
                $.cookie("currentDiv", numValue.toString());
            }

            //show the div
            $('.picture.' + $.cookie("currentDiv")).show();
            $('.current' + $.addClass(.cookie("currentDiv")); <--
    }
});

Div:

<div class="current"></div>

I have set styles from 1 to 8, so if it is "current 1," it displays the number 1. The cookie functions by setting a cookie named 'currentDiv' with a number from 1 to 8, and it refreshes the cookie if the value goes beyond 8. Now, the challenge is how to add that class to the div using this cookie and jQuery. It needs to add a class to prevent browsing data, and I have an SVG with numbers from 0 to 9

Thank you, Sake

Answer №1

To apply a class, use the following code snippet:

$('.current').addClass($.cookie("currentDiv"));

It is recommended to include a specific name along with the class, like so:

$('.current').addClass("cookie"+$.cookie("currentDiv"));

Using a name that does not begin with a number is a standard practice and should be adhered to, especially when naming functions, variables, classes, or files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to developing a responsive tile using HTML and CSS?

I am exploring the functionalities of CSS and responsive design. To better understand how it works, I created a simple example which can be accessed here. This demonstration showcases a basic tile template. My goal is to display my tiles in 2, 3, 4, or m ...

What is the best way to inform the user of their login status in Angular?

As a newcomer to angularfire2, I am currently working on implementing authentication and providing the user with feedback on their login status. I am using version angularfire2": "^5.0.0-rc.4. I came across an example on this site, but I am unsure of how i ...

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

I need help with creating a testimonial section where two divs automatically scroll inside a fixed-height container. Currently, only one div is scrolling while the other remains static in my code. I have implemented JavaScript for automatic scrolling wit ...

table that can be scrolled horizontally

I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge aris ...

What is the best way to make a div element take up the entire page

Is there a method to enlarge one div container to cover the entire page, similar to a zoom effect, without displaying any other elements on the page, and then enable the user to return to the normal view by pressing escape or clicking outside of the div ...

Utilizing MVC Razor and Ajax.BeginForm to dynamically update elements upon successful form submission

In my MVC search form, there is a date field that includes "-" and "+" buttons to navigate to the previous or next day, triggering a search each time. The issue I am facing is that when the -/+ button is clicked, it sends the current form data to the cont ...

Retrieving data from a dynamic identifier

When testing the sort order of search results, I encountered an issue with one specific search. The problem lies in the auto-generated ID for each row, which changes every time the search is performed. For example, I can use the following code snippet: s ...

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

Encountering an issue with npm start when attempting to launch the local host server for a React.js project

Encountering an issue with npm start Error message: 'Equipment' is not recognized as a command, operable program or batch file. internal/modules/cjs/loader.js:983 throw err; ^ Error: Module not found 'C:\Users\Home\Deskto ...

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

The message of error is undetermined

Can someone help me with using the errorMessage object from routes in a partial? I have attempted to implement it as shown below: Route:- const express = require("express"); const router = express.Router(); const Character = require("../models/character" ...

Can someone guide me on incorporating values from an external server into the app.post function?

After successfully completing the registration process for my app, where users can register and log in to a shop, I encountered a hurdle with the login functionality. Let me walk you through the issue. The function below checks my mongoDB collection to se ...

What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?

I need a div element to be displayed as a "scroll back to top" button on my webpage when the user has scrolled past a certain point. To achieve this, I am using the JavaScript code provided below: $(document).ready(function() { $(window).scroll(functio ...

The number THREE was not identified within the specified brackets

Here is the code snippet I am working on: var camera, scene, renderer; var mesh; var x, y, z; function init() { "use strict"; renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.i ...

Incorporating CSS animations into Vue.js while an API call is being made

When a specific icon is clicked, an API call is triggered: <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i> I am looking to add an animation to rotate the icon until the API call is complete or ...

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

After browsing through numerous documentation websites, I have noticed that many of them share the same layout and features. This has led me to question whether there is a common library used by all these documentation sites. How do they achieve this unif ...

What is the relationship between $.when, apply(), and $.done() within the scope of this function?

I recently received this function from a helpful SO user that allows for returning a variable number of jQuery $.get() requests. The initial part seems pretty straightforward, but I am struggling to understand how $.when(), apply(), and $.done() are inte ...

Node timers exhibiting unexpected behavior contrary to documented specifications

Feeling a bit lost with this one. I'm running Ubuntu and using nvm for node. I made sure to uninstall the version of node installed via apt just to be safe. node --version > v10.10.0 npm --version > 6.4.1 So, I go ahead and create-react-app a ...

Storing information in a database using Phantomjs

My app is built on phantomjs and here's how it currently operates: 1. A php script retrieves data from my postgres database as an array, 2. The array of data is then passed as an argument to a shell_exec command running a phantomjs script, 3. Phantomj ...

Using regex in Javascript to find and match an ID within a string

JavaScript: var data='<div id="hai">this is div</div>'; I am looking to retrieve only the ID "hai" using a regular expression in JavaScript. The expected output should be, var id = regularexpression(data); The variable id should n ...