Zmiana klas w jQuery

0

Witajcie,
Potrzebuję zrobić następującą funkcjonalność:

  • na stronie jest link, po kliknięciu którego będzie dodawana do body klasa hightcontrast - i po ponownym kliknięciu będzie ona usuwana.

Dotychczas zrobiłem taki kod:


<a href="#"  title="Zmień kontrast" class="float-right m-0 pr-2 contrast">
            <img src="assets/images/ikon1.png" class="img-responsive contrast" alt="Zmień kontrast">
</a>


$(document).ready(function($) {
    if (localStorage.getItem("contrast") === null) {
        localStorage.setItem("contrast", '1');
    }

    if (typeof(Storage) !== "undefined") {
        // checkContrast();

        function checkContrast() {
            let oldContrast = localStorage.getItem("contrast");
            alert(oldContrast);
            updateViewContrast(oldContrast);
        }

        $(".contrast").click(function() {
            checkContrast();
        });

        function updateViewContrast(contrastVersion) {
            if (contrastVersion === '1') { // normalny
                $("body").removeClass('highcontrast');
                localStorage.setItem("contrast", '2');
            } else {
                $("body").addClass('highcontrast');
                localStorage.setItem("contrast", '1');
            }
        }
    }
});

Po każdym kliknięciu wyświetlam alert z 1 lub 2 aby zobaczyć czy działa.

Problem w tym że po kliknięciu w linka widzę 2 alert (jeden po drugim): 1, 2.

Klasa highcontrast po pierwszym kliknięciu jest widoczna cały czas.

Jak to naprawić?

Bardzo proszę o pomoc

1

Tak przekombinowanego kodu, to już dawno nie widziałam.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
BODY.hightcontrast {background-color:#F7E691;}
</style>

</head>
<body>

<a href="#" id="hc">ja jestem link do klikania</a>

<script>
  document.querySelector("#hc").addEventListener("click", () => {
      document.body.classList.toggle("hightcontrast");
  });
</script>
</body>
</html>

Lub ew. jeżeli jesteś skryptowym nazistą ;)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
BODY.hightcontrast {background-color:#F7E691;}
</style>

</head>
<body>

<a href="#" id="hc">ja jestem link do klikania</a>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector("#hc").addEventListener("click", () => {
        document.body.classList.toggle("hightcontrast");
    });
  })
</script>
</body>
</html>
3

On jeszcze chciał zapisać do local strage — @TomRiddle

No to tak:

Uwaga: pewną pułapką jest fakt, że wartości przechowywane w local storrage stają się stringami, stąd porównywanie:
if (localStorage.getItem("contrast")=="true")

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
BODY.hightcontrast {background-color:#F7E691;}
</style>

</head>
<body>

<a href="#" id="hc">ja jestem link do klikania</a>

<script>
  document.querySelector("#hc").addEventListener("click", () => {
    document.body.classList.toggle("hightcontrast");
    localStorage.setItem("contrast", document.body.classList.contains("hightcontrast"));  
  });
  if (localStorage.getItem("contrast")=="true") document.body.classList.add("hightcontrast");
</script>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1