I want to create jQuery with contrast functionality, where the user clicks on a particular button, the site would be dark and if clicked again, it would return to normal. We bought a template that offers this functionality, but in the following way:
Hiscodelookslikethis:
(function(){$('<divclass="color-picker"><a href="#" class="handle"><i class="icofont icofont-color-bucket"></i></a><div class="settings-header"><h3>Painel de Controle</h3></div><div class="section"><h3 class="color">Cor:</h3><div class="colors"><a href="#" class="color-1" ></a></div></div><div class="section"><h3 class="color">Contraste:</h3><div><a href="#" class="color-inverse"><img class="img img-fluid img-thumbnail" src="assets/images/contraste.png" style="width: 50px" /></a></div></div></div>').appendTo($('body'));
})();
$(".color-1").on('click',function() {
$("#color").attr("href", "assets/css/color/color-1.css");
return false;
});
$(".color-inverse").on('click',function() {
$("#color").attr("href", "assets/css/color/color-inverse.css");
return false;
});
I would like to center the clicks only on the contrast icon and remove the blue icon. For this, I tried it that way, but it did not work:
$(".color-1").on('click',function() {
$("#color").attr("href", "assets/css/color/color-1.css");
return false;
});
$(".color-inverse").on('click',function() {
$("#color").attr("href", "assets/css/color/inverse.css");
var classe = $(this).attr("class");
//alert(classe);
if(classe == 'color-inverse'){
var div = document.querySelector('div');
div.classList.remove('color-inverse');
div.classList.add('color-1');
}else{
var div = document.querySelector('div');
div.classList.remove('color-1');
div.classList.add('color-inverse');
}
return false;
});