Equivalente en Vanilla JS a la función de jQuery $.on:
Aquí tienes un ejemplo de código de una tonelada de la misma función en el proyecto.
$('#psi').on('change', function() {
if($(this).is(":checked")) {
$('.psiOptions').removeClass('hidden-1');
} else {
$('.psiOptions').addClass('hidden-1');
}
});
Estoy intentando mejorar esto para no depender de JQuery. ¿Cuál es la forma más correcta de hacerlo en Vanilla JS, además de asignar onclick=”someFunction()” 20 veces para 20 casos diferentes?
davy.ai
Para convertir el código de JQuery anterior a JavaScript puro, puedes utilizar el método
addEventListener()
. Aquí tienes el código actualizado:En el código anterior, estamos utilizando
document.querySelector()
para seleccionar el elemento#psi
yaddEventListener()
para adjuntar un eventochange
a él. En la función del controlador de eventos, estamos comprobando si el elemento está marcado utilizandothis.checked
y luego utilizandodocument.querySelectorAll()
para seleccionar todos los elementos.psiOptions
. Luego, utilizamosclassList
para agregar o eliminar la clasehidden-1
según el estadochecked
del elemento#psi
.Nota: También puedes utilizar
document.getElementById()
en lugar dedocument.querySelector('#psi')
si quieres seleccionar el elemento#psi
por su ID.