Javascript 刷新页面后将类保存到图标
我有以下代码:Javascript 刷新页面后将类保存到图标,javascript,html,css,Javascript,Html,Css,我有以下代码: <div class="places-item"> <div class="places-item-img"></div> <div class="places-item-header"> <h2>Machu Picchu, Peru</h2> <div class="places-item-header-add"><svg
<div class="places-item">
<div class="places-item-img"></div>
<div class="places-item-header">
<h2>Machu Picchu, Peru</h2>
<div class="places-item-header-add"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path d='M352,48H160a48,48,0,0,0-48,48V464L256,336,400,464V96A48,48,0,0,0,352,48Z' style='fill:transparent;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg></div>
</div>
</div>
<div class="places-item">
<div class="places-item-img"></div>
<div class="places-item-header">
<h2>Ciucaș Peak, Romania</h2>
<div class="places-item-header-add"><svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path d='M352,48H160a48,48,0,0,0-48,48V464L256,336,400,464V96A48,48,0,0,0,352,48Z' style='fill:transparent;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg></div>
</div>
</div>
var addBtn=document.querySelectorAll('.places-item-header-add');
对于(i=0;i特定于您的元素,添加ID以便我们可以指定哪个项目处于活动状态。
例如
将id添加到项目标题。
加载窗口时,检查localstorage中的值并更新item类
var addBtn = document.querySelectorAll('.places-item-header-add');
var items = JSON.parse(localStorage.getItem('selected_items')) || {};
for (i = 0; i < addBtn.length; ++i) {
if (items[addBtn[i].id]) {
addBtn[i].classList.add('added');
}
addBtn[i].addEventListener('click', function() {
this.classList.toggle('added');
if (this.classList.contains('added')) {
items[this.id] = true;
} else {
items[this.id] = false;
}
localStorage.setItem('selected_items', JSON.stringify(items));
})
}
var addBtn=document.querySelectorAll('.places-item-header-add');
var items=JSON.parse(localStorage.getItem('selected_items'))|{};
对于(i=0;i
检查这把小提琴
是,使用本地存储,我们可以存储一些id来指定哪个位置项处于活动状态,而不是存储索引,如{peru:true,romania:true}
您可以更准确地帮助我吗?因为我是初学者,不知道该怎么做。请阅读本地存储并尝试自己做,如果您遇到困难,请询问。但不要让别人为您做所有事情,StackOverflow不是这样工作的。
var addBtn = document.querySelectorAll('.places-item-header-add');
for(i=0;i<addBtn.length;++i)addBtn[i].addEventListener('click',function(){
this.classList.toggle('added');
});
var addBtn = document.querySelectorAll('.places-item-header-add');
var items = JSON.parse(localStorage.getItem('selected_items')) || {};
for (i = 0; i < addBtn.length; ++i) {
if (items[addBtn[i].id]) {
addBtn[i].classList.add('added');
}
addBtn[i].addEventListener('click', function() {
this.classList.toggle('added');
if (this.classList.contains('added')) {
items[this.id] = true;
} else {
items[this.id] = false;
}
localStorage.setItem('selected_items', JSON.stringify(items));
})
}