Сравните ключи localStorage с любым идентификатором элемента и добавьте класс к элементу, если он равен - PullRequest
Новая
       9

Сравните ключи localStorage с любым идентификатором элемента и добавьте класс к элементу, если он равен

1 голос
/ 27 февраля 2020

Я пытаюсь создать функцию закладки / избранного для галереи изображений, чтобы пользователь мог пометить определенные изображения как избранные (сохраненные в localStorage).

Итак, в настоящее время я вызываю функцию для каждого элемента через onClick="addFavorites(this)" и функцию 

function addFavorites(element) {
    var bild = element.id;
    if (localStorage.getItem(bild) === null) {
        localStorage.setItem(bild, bild);
    } else {
        localStorage.removeItem(bild);
    }
}

Пока все работает нормально. Теперь я хотел бы, чтобы выбранные изображения также были помечены визуально (особенно при перезагрузке страницы), и я очень стараюсь найти решение по этому вопросу. Есть ли возможность сравнить ключи localStorage с любым идентификатором элемента и добавить класс fe favorite к элементу, если он равен.

Может быть, есть и более простой способ решить эту проблему?

Любая помощь или идеи будут великолепны!

1 Ответ

1 голос
/ 27 февраля 2020

Допустим, все ваши фотографии имеют идентифицирующий класс, например "picture". Тогда у вас может быть что-то вроде этого при загрузке страницы: 

var pictures = document.querySelectorAll(".picture");
pictures.forEach(picture => {
    if (localStorage.getItem(picture.id)) {
        picture.classList.add("favorite");
    }
});

Вам также необходимо немного изменить свой addFavor: 

function addFavorites(element) {
    var bild = element.id;
    if (localStorage.getItem(bild) === null) {
        localStorage.setItem(bild, bild);
        element.classList.add("favorite");
    } else {
        localStorage.removeItem(bild);
        element.classList.remove("favorite");
    }
}

И тогда, конечно, вы будете управлять появление класса favorite в ваших CSS стилях.

...