Javascript 更改对象类并保存它'；'localstorage'中的更改`

我有数百个按钮。当页面加载时，这些按钮会附加一个星号。该星号将根据点击该星号来指示哪个星号受欢迎或不受欢迎

我想在点击时将该星更改为“fav”星，然后在再次点击时将其更改为“UNVOV”，以此类推。然后，保存在本地存储中。现在，它不会切换。相反，它会更改按钮的类别，而不是最喜爱的星星

如何解决这个问题

此外，按钮也将被带到列表的顶部，以便更可见

我从以下代码开始：

//给按钮一个星号，并给它一个唯一的ID以进行更改
var img=新图像（）；
var buttons=[…document.getElementsByClassName（'myButton'）；
img.src='icons/buttons/fav.png'；
img.onload=函数（）{
按钮。forEach（按钮=>{
img.id=button.id+'butfav'；
button.innerHTML+=img.outerHTML；
});
};
img.classList.add（'fav'）；
img.setAttribute（“href”、“#”）；
img.setAttribute（“标题”、“收藏”）；
//喜爱的代码
//从本地存储或空阵列获取收藏夹
var favorites=JSON.parse（localStorage.getItem（'favorites'））| |[]；
//将类“fav”添加到每个收藏夹
favorites.forEach（函数（收藏夹）{
document.getElementById（收藏夹）.className='fav'；
});
//注册单击事件侦听器
document.querySelector（'.myButtons'）。addEventListener（'click'，函数（e）{
var id=e.target.id，
项目=e.目标，
index=favorites.indexOf（id）；
//如果目标没有id，则返回（不应该发生）
如果（！id）返回；
//项目不是最喜欢的
如果（索引==-1）{
收藏夹。推送（id）；
item.className='unav'；
//该项目已经是最喜爱的
}否则{
收藏夹.拼接（索引，1）；
item.className='fav'；
}
//在本地存储中存储阵列
setItem（'favorites'，JSON.stringify（favorites））；
});
//本地存储存储字符串，因此我们使用JSON对存储和存储进行字符串化
解析以退出存储

.myButton{
位置：相对位置；
背景色：rgba（0,0,0,7）；
字体系列：“尾码”；
宽度：45.5%；
右边距：2px；
边缘底部：9px；
填充：10px；
填充顶部：8px；
垫底：8px；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：粗体；
光标：指针；
颜色：#FFFFFF；
盒影：0 5px灰色；
字体大小：16px；
边界半径：6px；
边框：实心#FFFFFF 2px；
文字装饰：无；
过渡：.2s；
}
法夫先生{
全部：首字母；
高度：24px；
宽度：24px；
右：0px；
位置：绝对位置；
光标：指针；
z指数：+20；
}
.unfav{
全部：首字母；
高度：24px；
宽度：24px；
右：0px；
位置：绝对位置；
光标：指针；
内容：url（“图标/按钮/unsv.png”）
}

您的问题是什么？你需要哪部分的帮助？很好，我将编辑我的问题。是的，切换它并保存切换操作是我想要完成的。你为什么要将你的

.fav

类添加到你的

img

s？在您的点击处理程序中，您是否应该更改图像，例如，在fav.png和unfav.png之间进行更改，您最初放置每个按钮？我不知道如何执行此操作，特别是因为我有所有这些具有不同ID的图像，您的问题是什么？你需要哪部分的帮助？很好，我将编辑我的问题。是的，切换它并保存切换操作是我想要完成的。你为什么要将你的

.fav

类添加到你的

img

s？在您的点击处理程序中，您是否应该更改图像，例如，在fav.png和unfav.png之间进行更改，您最初放置每个按钮？我不知道如何执行此操作，特别是因为我有所有这些具有不同ID的图像