Добавьте класс в div после перезагрузки, настроив атрибут «data»

Question

У меня есть четыре карты с классом «карта», но у каждой есть свой атрибут данных: глаза, туловище, руки и ноги.

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

Каждый раз, когда пользователь нажимает на карту, это Карточке дан класс «чтение». Кроме того, браузер просматривает атрибут данных этой карты и локально сохраняет его в массиве.

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

Я пытаюсь сделать следующее: после перезагрузки страницы дать каждую карточку, которая соответствует Атрибут data хранится в массиве класса «чтение», так что при обновлении страницы те же карточки будут иметь этот класс.

Answer 1

Сохраните его как массив в localstorage, и тогда будет просто l oop, чтобы установить класс, выбрав элементы по атрибуту.

$(document).ready(function() {
  // read the localstorage and obtain the stored cards
  // if no value, just use an empty array
  var readingCards = JSON.parse(localStorage.getItem('readingCards') || '[]')
  // loop over the array and add the classes to our elements
  readingCards.forEach(function(value) {
    $('[data-lesson="' + value + '"]').addClass('reading')
  })
  // add the click event to the cards
  $(".card").on('click', function() {
    // get the card and toggle the class
    var card = $(this)
    card.toggleClass('reading')
    // select all the cards that are active and turn them into an array
    readingCards = $(".card.reading").map(function() {
      return this.dataset.lesson
    }).get()
    // set the array to localstorage
    localStorage.setItem('readingCards', JSON.stringify(readingCards))
  })
})

Answer 2

Вы можете просто перебрать все элементы, имеющие класс card, с помощью each() и проверить, включен ли соответствующий атрибут данных в строку локального хранилища, разделенных запятыми.

Вы можете попробовать это

https://jsfiddle.net/jL6o7dc4/1/

$(document).ready(function(){

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

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

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

     });

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

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

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

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

    }

 });

Answer 3

Используйте селектор css ".card [data-lesson = 'AAA']", чтобы однозначно идентифицировать карточки при переборе сохраненных значений.

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

Answer 4

Вы можете попробовать это -

HTML -

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

Javascript -

// On ready get the localStorage item and set the 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));
});