Estoy codificando un sitio web y quiero poder cambiar entre el modo diurno y el modo nocturno. No funciona, necesito ayuda aquí. Gracias de antemano.
HTML
<div> <input type="checkbox" class="checkbox" id="chk" /> <label class="label" for="chk"> <i class="fas fa-moon"></i> <i class="fas fa-sun"></i> <div class="ball"></div> </label>Guion
$(document).ready(function(){ $("#chk").click(function(){ $("body").css("background-color", "black"); }); });En su método, cuando se activa el evento de clic del elemento <input> , el color de fondo del elemento <body> se asigna constantemente black ; este comportamiento no crea un efecto de alternancia.
Puede cambiar entre los modos diurno y nocturno utilizando el evento de cambio del elemento <input> :
$(document).ready(function(){ function changeColor(newBgColor) { $("#sun").css({color: newBgColor}); $("#moon").css({color: newBgColor}); } /* When the <input> element's change event fires */ $('#chk').change(function() { if(this.checked) { $("body").css("background-color", "black"); changeColor("white"); } else { $("body").css("background-color", "white"); changeColor("black"); } }); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="checkbox" class="checkbox" id="chk" /> <label class="label"> <i id="moon" class="fas fa-moon"></i> <i id="sun" class="fas fa-sun"></i> <div class="ball"></div> </label> </div> Puede evitar esto dando a los elementos <i> una id .
$(document).ready(function(){ function changeColor(newBgColor) { $("#sun").css({color: newBgColor}); $("#moon").css({color: newBgColor}); } /* Fires when clicking <i> with id value of "sun" */ $("#sun").click(function(){ $("body").css("background-color", "black"); changeColor("white"); }); /* Fires when clicking <i> with id value of "moon" */ $("#moon").click(function(){ $("body").css("background-color", "white"); changeColor("black"); }); }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label class="label"> <i id="moon" class="fas fa-moon"></i> <i id="sun" class="fas fa-sun"></i> <div class="ball"></div> </label> </div>Puede usar una regla css para hacer que el fondo sea negro (.black) y usar toggleClass() para que funcione
$(document).ready(function(){ $("#chk").click(function(){ $("body").toggleClass('black'); }); }); .black { background-color:#000 } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="checkbox" id="chk" /> <label class="label" for="chk"> <i class="fas fa-moon"></i> <i class="fas fa-sun"></i> <div class="ball"></div> </label>