Chciałbym stworzyć menu z preferencjami użytkownika.
Mam jednak mały problem.
Aktualnie mam tylko taki kod, który znalazłem w internecie:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
//buttons
const offAnimationsButton = $(".offAnimations"),
onAnimationsButton = $(".onAnimations"),
// Events
offAnimationsButton.on("click", () => {localStorage.setItem('animations', 'off'); Swal.fire({
position: 'mid-end',
type: 'error',
title: 'Example Title - ON',
showConfirmButton: false,
width: 850
}); removeAnimations();});
onAnimationsButton.on("click", () => {localStorage.removeItem('animations', 'off'); Swal.fire({
position: 'mid-end',
type: 'success',
title: 'Example Title - OFF',
showConfirmButton: false,
timer: 2000,
width: 850
}); location.reload();});
// Functions removing
const removeAnimations = () => {
$(".animated").removeClass("animated"), $(".fas.fa-cog.fa-spin").removeClass("fa-spin")
},
// After page reload checks
localStorage.getItem("animations")&&removeAnimations();
//On website
<span class="onAnimations">
<i class="fas fa-circle circleON2"></i>
</span>
<span class="offAnimations">
<i class="far fa-circle circleOFF2"></i>
</span>
Jak widać - została użyta "biblioteka" sweetalert, która działa poprawnie.
Lecz nie wiem co dodać do kodu, żeby ukryć dany element.
Z tego co mi się wydaje - brakuje pętli, która określi w kodzie kiedy dany element ma być ukryty a kiedy pokazany.
Coś na takiej zasadzie:
if (xxx == włączone) {
Lorem Ipsum # 1
}else (xxx == wyłączone) {
Lorem Ipsum # 2
}Lecz brakuje mi umiejętności, aby napisać taką pętlę po prostu :(
Jeżeli jakaś miła duszyczka mogłaby pomóc napisać taką pętle pod mój problem - byłbym bardzo wdzięczny i chętnie taką osobę wynagrodzę :D