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