localStorage,使用toggleClass保存类 [英] localStorage, saving a class using toggleClass
问题描述
在涉及到localStorage时,我似乎无能为力。我想通过切换一个类来设置一个喜欢div组中任何div的方式。我可以让toggleClass处理单个div并保存,但localStorage将所有div保存为收藏夹,而不仅仅是设置了toggleClass的div。显然我错过了一些东西。
I am clueless when it comes to localStorage it seems. I want to set up a way favorite any div in a group of div's by toggling a class. I can get the toggleClass to work on the individual div and be saved but localStorage saves all the div's as favorites, not just the one with the toggleClass set. Obviously I am missing something.
localStorage代码:
localStorage code:
if (typeof (localStorage) == 'undefined') {
document.getElementById("result").innerHTML = 'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
if (localStorage.getItem("fav") != null) {
getFav = localStorage.fav;
$(".item").addClass('favorites');
}
}
$(document).ready(function () {
$('.btn').on('click', function () {
getFav = localStorage.fav;
//$(".item").removeClass('favorites');
//localStorage.removeItem('background');
$(this).closest(".item").toggleClass('favorites');
if ($(this).closest(".item").hasClass('favorites')) {
localStorage.setItem('fav', 'favorites');
}else{
localStorage.removeItem('fav');
}
});
});
问题在于
$(".item").addClass('favorites');
它将类添加到所有.items,显然它不应该。
It adds the class to all .items and obviously it should not.
任何帮助都将不胜感激!
Any help would be appreciated!
推荐答案
如果其他答案问题不够,这里是一个允许你有多个div在重新加载后维持状态而不只是一个的解决方案。
In case the other answers questions do not suffice here is a solution that allows you to have multiple divs that will maintain state after reload rather than just one.
http://codepen.io/anon/pen/WvmEbX
if (typeof(localStorage) == 'undefined') {
document.getElementById("result").innerHTML =
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
$(".item").each(function(i, el) {
if (localStorage['fav' + i] == 'favorites') {
$(this).addClass('favorites');
}
});
}
$(document).ready(function() {
$('.btn').on('click', function() {
var $item = $(this).closest('.item');
var index = $('.item').index($item);
$item.toggleClass('favorites');
if ($item.hasClass('favorites')) {
localStorage.setItem('fav' + index, 'favorites');
} else {
localStorage.removeItem('fav' + index);
}
});
});
这篇关于localStorage,使用toggleClass保存类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!