Почему мой classList применяется ко всем значкам
У меня есть 3 иконки сердца. Я хочу добавить класс к каждой иконке, класс хранится в Localstorage.
Когда я обновляю страницу, класс добавляется ко всем трем значкам, но я хочу выбрать только один, который будет активным.
const heart = document.querySelectorAll('.icons .fa-heart');
let classr = localStorage.getItem("class");
heart.forEach((x) => {
if (classr !== null) {
x.classList.toggle(classr);
}
x.addEventListener("click", () => {
x.classList.toggle("active");
localStorage.setItem("class", "active");
});
});
@epascarello да, я знаю, но как мне настроить таргетинг, выберите один
Дать элементу имя, идентификатор, атрибут данных. Прочтите это и сохраните. Когда вы выполняете цикл, проверьте, какой из них выбран, и добавьте класс.
Нужно ли запоминать каждый или можно выбрать только один?
Ответы 1
Вы сохраняете класс в локальном хранилище, но то, что вы хотите сохранить, — это способ идентификации выбранного сердца.
Если вы не хотите присваивать каждому сердцу идентификатор, вы должны иметь возможность использовать индекс элемента в дочерней коллекции их родителя.
(function()
{
let heartsContainer = document.getElementById('hearts');
for(let hi = 0; hi < heartsContainer.children.length; hi++)
{
let heart = heartsContainer.children[hi];
let gotValue = localStorage.getItem(hi);
if (gotValue !== null && gotValue === 'true')
{
heart.classList.toggle('empty');
heart.classList.toggle('full');
}
heart.addEventListener('click', function(e)
{
e.target.classList.toggle('empty');
e.target.classList.toggle('full');
let storedValue = localStorage.getItem(hi);
if (storedValue !== null)
{
localStorage.setItem(hi, !(storedValue==='true'));
}
else
{
localStorage.setItem(hi, true);
}
});
}
})();.empty::before
{
content:'♡';
}
.full::before
{
content:'♥';
}<div id = "hearts">
<p class = "empty"></p>
<p class = "empty"></p>
<p class = "empty"></p>
</div>(Фрагмент не будет работать из-за проблем с безопасностью, но вы можете увидеть, как он работает на codepen: https://codepen.io/schmellen/pen/BaOyMmL)
If (storedValue !== null) проверяет, есть ли уже запись в localStorage для этого номера. Если запись не null, то она существует, поэтому ее нужно только переключить.
Если запись не существует (значение равно null), а состояние по умолчанию для сердца «пусто», при первом создании записи запись должна быть true, потому что сердце будет заполнено.
Да, теперь это сработало, но я не понимаю, есть ли еще код, который вы поставили, не могли бы вы объяснить @Matt Ellen
@swadhin Я обновил ответ. это объяснение помогает?
Да, я немного понял, сейчас я нахожусь в фазе обучения, поэтому я пытаюсь создать небольшой проект самостоятельно, но всякий раз, когда я пытался, он получал какую-то ошибку, и самая большая проблема в том, что я не знаю, как задать правильный вопрос, и мой плохой английский. почти 3 месяца я пытался выучить js самостоятельно @Matt Ellen
Потому что вы назначаете его всем им в цикле... В вашем коде нет ничего, что устанавливало бы, какой из них активен. Вы просто устанавливаете общий класс.