通过定位 "data" 属性在重新加载后将类添加到 div

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)
});

我想做的是：在页面重新加载后，给每一张与数组中存储的数据属性匹配的卡一个"reading"类，这样当页面刷新时，相同的卡都会有这个类。

Answer 1

您只需遍历具有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 2

你可以试试这个-

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));
});

Answer 3

在迭代存储值时，使用css选择器".card[data-secure='AAA']"来唯一标识卡。

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

Answer 4

将其作为数组存储在本地存储中，然后通过属性选择项来设置类是一个简单的循环。

$(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))
})
})