匹配 2 个数组并根据结果应用更改

Question

我在使用 Javascript 时遇到问题（我是新手） 我的问题如下：

我的网站在一个页面上显示 50 张图片。 每张图片下方都有一个“稍后观看”按钮。 单击此按钮时，按钮的 ID（与其上方图像的 ID 相关）将保存到具有 LocalStorage 的数组中，并且按钮的类更改以显示此图像已“保存”以供稍后观看。

问题是当页面刷新时，按钮会回到原来的类。因此，如果用户返回此页面，他将看不到他保存了哪些图片以供以后使用。显然，我希望这些按钮能够通过刷新保持他们的新类。

所以我试图解决这个问题的方法是获取页面的所有按钮 ID 并将它们保存到一个数组中，然后我将此数组与我的本地存储中的数组进行比较以找到匹配项。

我不知道的是，在找到匹配的 ID 后，如何更改具有此 ID 的元素的类。

我的代码：

按钮：

<button type="button" id="006" class="btn btn-default grey addwatchlater">

Javascript：

var allButtonsID = $(".showpics button[id]")      
.map(function() { return this.id; })
.get();

parsed = JSON.parse(localStorage.getItem('idswatched') || "[]");    



var found = false;
var returnArray = [];
for (var i = 0; i < allButtonsID.length; i++) {
if (parsed.indexOf(allButtonsID[i]) > -1) {
found = true;

**// Changing the Class related to the IDs matching the localstorage array**    
**// I was thinking using toggleClass('btn-default btn-primary');**
**// but I don't know how to write so it's changed only for the buttons having matching IDs...**


break;
}
}

对不起，如果我犯了语法错误，我不是以英语为母语的人。 感谢您的帮助！

Answer 1

如果您在 LocalStorage 上有一个数组，其中包含您为以后保存的项目的 ID，您可以执行以下操作：

$(document).ready(function(){
    $.each(arrayFromLocalStorage, function(key, value){
        $("#"+value).addClass("watchlater");
    });
});

请注意，我在代码中使用了 jquery，因此您应该将其包含到您的项目中。