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

Question

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

我的网站在一个页面上显示 50 张图片。每张图片下方都有一个按钮"Watch later"。单击此按钮时，按钮的 ID（与其上方图像的 ID 相关）将保存到具有 LocalStorage 的数组中，并且按钮的 class 发生变化以显示此图像是 "saved" 待会儿再看

问题是刷新页面时，按钮会恢复到原来的状态 class。因此，如果用户返回此页面，他将看不到他为以后保存了哪些图片。显然我希望这个按钮在刷新时保持新的 class。

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

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

我的代码：

按钮：

<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，因此您应该将其包含在您的项目中。

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

Matching 2 arrays and apply changes depending of the results

javascript

arrays

local-storage