After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

Question

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs.

<div class="card" data-lesson="eyes">eyes</div>
<div class="card" data-lesson="torso">torso</div>
<div class="card" data-lesson="arms">arms</div>
<div class="card" data-lesson="legs">legs</div>

Whenever the user clicks on a card, that specific card receives the designation of "reading". Furthermore, the browser captures the data attribute value from the clicked card and stores it locally in an array.

$(".card").click(function(){
    $(this).addClass("reading")
    localStorage.setItem("readingCards" , readingCards)
 });

My goal is to ensure that post-reload, any card matching a stored data attribute in the array will automatically be assigned the "reading" class, allowing for consistent visual cues even after page refreshes.

javascript jquery html css local-storage

Answer 1

Answer №1

To efficiently loop through all elements that have the card class, utilize the each() function to verify if the respective data attribute is present in the locally stored string separated by commas.

Give this approach a try:

https://jsfiddle.net/kL8p9ec7/2/

$(document).ready(function(){

var readingCards = localStorage.getItem("readingCards")!==null?localStorage.getItem("readingCards"):'';

     $(".card").each(function(){

          if(readingCards.includes($(this).data("lesson"))){
            $(this).addClass("selected");
       }

     });

     $(".card").click(function(){

         $(this).addClass("selected");

         if(!readingCards.includes($(this).data("lesson"))){

         readingCards+=(readingCards.length>0?',':'')+$(this).data("lesson");
         localStorage.setItem("readingCards",readingCards);

    }

 });

Answer 2

To efficiently loop through all elements that have the card class, utilize the each() function to verify if the respective data attribute is present in the locally stored string separated by commas.

Give this approach a try:

https://jsfiddle.net/kL8p9ec7/2/

$(document).ready(function(){

var readingCards = localStorage.getItem("readingCards")!==null?localStorage.getItem("readingCards"):'';

     $(".card").each(function(){

          if(readingCards.includes($(this).data("lesson"))){
            $(this).addClass("selected");
       }

     });

     $(".card").click(function(){

         $(this).addClass("selected");

         if(!readingCards.includes($(this).data("lesson"))){

         readingCards+=(readingCards.length>0?',':'')+$(this).data("lesson");
         localStorage.setItem("readingCards",readingCards);

    }

 });

Answer 3

Answer №2

Give this a shot-

The HTML code is as follows:

<div class="card" data-lesson="eyes">Card 1</div>
<div class="card" data-lesson="torso">Card 2</div>
<div class="card" data-lesson="arms">Card 3</div>
<div class="card" data-lesson="legs">Card 4</div>

The corresponding Javascript appears below:

// When the page loads, retrieve local storage items and display readings
var readingCards = localStorage.getItem('readingCards');
readingCards = typeof readingCards === 'string' && readingCards.length > 0 ? JSON.parse(readingCards) : [];

if (readingCards.length > 0) {
    $('.card').each(function(index) {
        let lesson = $(this).data('lesson');
        if (readingCards.indexOf(lesson) > -1) {
            $(this).addClass('reading');
        }
    });
}


$('.card').on('click', function() {

    if (!$(this).hasClass('reading')) {
        $(this).addClass('reading');
    }

    let lesson = $(this).data('lesson');

    if (readingCards.indexOf(lesson) === -1) {
        readingCards.push(lesson);
    }


    localStorage.setItem('readingCards', JSON.stringify(readingCards));
});

Answer 4

Give this a shot-

The HTML code is as follows:

<div class="card" data-lesson="eyes">Card 1</div>
<div class="card" data-lesson="torso">Card 2</div>
<div class="card" data-lesson="arms">Card 3</div>
<div class="card" data-lesson="legs">Card 4</div>

The corresponding Javascript appears below:

// When the page loads, retrieve local storage items and display readings
var readingCards = localStorage.getItem('readingCards');
readingCards = typeof readingCards === 'string' && readingCards.length > 0 ? JSON.parse(readingCards) : [];

if (readingCards.length > 0) {
    $('.card').each(function(index) {
        let lesson = $(this).data('lesson');
        if (readingCards.indexOf(lesson) > -1) {
            $(this).addClass('reading');
        }
    });
}


$('.card').on('click', function() {

    if (!$(this).hasClass('reading')) {
        $(this).addClass('reading');
    }

    let lesson = $(this).data('lesson');

    if (readingCards.indexOf(lesson) === -1) {
        readingCards.push(lesson);
    }


    localStorage.setItem('readingCards', JSON.stringify(readingCards));
});

Answer 5

Answer №3

To distinguish the cards during the iteration of stored values, you can utilize the css selector ".card[data-lesson='AAA']".

let savedCards = localStorage.getItem("readingCards") || "";
savedCards = savedCards.split(',');
$.each(savedCards, function( index, cardValue ) {
   $(".card[data-lesson='" + cardValue + "']").addClass("reading");
});

Answer 6

To distinguish the cards during the iteration of stored values, you can utilize the css selector ".card[data-lesson='AAA']".

let savedCards = localStorage.getItem("readingCards") || "";
savedCards = savedCards.split(',');
$.each(savedCards, function( index, cardValue ) {
   $(".card[data-lesson='" + cardValue + "']").addClass("reading");
});

Answer 7

Answer №4

To simplify the process, store the data as an array in local storage and then use a loop to easily set the class by selecting items based on their attributes.

$(document).ready(function() {
  // Retrieve stored cards from local storage or initialize an empty array
  var readingCards = JSON.parse(localStorage.getItem('readingCards') || '[]');
  
  // Add classes to elements based on stored card values
  readingCards.forEach(function(value) {
    $('[data-lesson="' + value + '"]').addClass('reading');
  });
  
  // Add click event to cards
  $(".card").on('click', function() {
    // Toggle class of clicked card
    var card = $(this);
    card.toggleClass('reading');
    
    // Create an array of active cards
    readingCards = $(".card.reading").map(function() {
      return this.dataset.lesson;
    }).get();
    
    // Store updated array in local storage
    localStorage.setItem('readingCards', JSON.stringify(readingCards));
  });
});

Answer 8

To simplify the process, store the data as an array in local storage and then use a loop to easily set the class by selecting items based on their attributes.

$(document).ready(function() {
  // Retrieve stored cards from local storage or initialize an empty array
  var readingCards = JSON.parse(localStorage.getItem('readingCards') || '[]');
  
  // Add classes to elements based on stored card values
  readingCards.forEach(function(value) {
    $('[data-lesson="' + value + '"]').addClass('reading');
  });
  
  // Add click event to cards
  $(".card").on('click', function() {
    // Toggle class of clicked card
    var card = $(this);
    card.toggleClass('reading');
    
    // Create an array of active cards
    readingCards = $(".card.reading").map(function() {
      return this.dataset.lesson;
    }).get();
    
    // Store updated array in local storage
    localStorage.setItem('readingCards', JSON.stringify(readingCards));
  });
});

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it feasible to set a default value in an HTML input field that is not editable using JavaScript?

When I click the confirm button on Sweet Alert, I would like to update the database status from the default (pending) to confirmed

Retrieve an object using a variable

Ways to swap out element within ViewContainerRef in Angular

Executing a function in Angular 2 depending on the class assigned to a <div>

Sticky positioning causes elements to stick to the window as the

ajax with names that are alike

ng-class in AngularJS not interacting with Scope method

Issue with border radius in MUI 5 affecting table body and footer elements

Error: Attempting to access the 'url' property of an undefined variable, despite specifically checking for its undefined status

Troubleshooting Problems with Node JS Express, Passport JS, and Authentication on Android Devices

Tips for handling CSS loading delays with icons in OpenLayers markers

How to make views in React Native adjust their size dynamically in a scrollview with paging functionality

Why is the responseText from XMLHttpRequest always stripped of tags in AJAX?

Sending input values to controller action parameters in CakePHP

Transform a jQuery collection of 'multiple unparented elements' into a string

Here's a guide on using a button to toggle the display of password value in Angular, allowing users to easily hide

Using $stateParams injection for unit testing Angular applications with Karma

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Transferring User ID from Google Tag Manager to GA4 Problem