es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Equivalente en Vanilla JS a la función de jQuery $.on:

14 Jul, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    document.querySelector('#psi').addEventListener('change', function() {
  if (this.checked) {
    document.querySelectorAll('.psiOptions').forEach(function(element) {
      element.classList.remove('hidden-1');
    });
  } else {
    document.querySelectorAll('.psiOptions').forEach(function(element) {
      element.classList.add('hidden-1');
    });
  }
});

    En el código anterior, estamos utilizando document.querySelector() para seleccionar el elemento #psi y addEventListener() para adjuntar un evento change a él. En la función del controlador de eventos, estamos comprobando si el elemento está marcado utilizando this.checked y luego utilizando document.querySelectorAll() para seleccionar todos los elementos .psiOptions. Luego, utilizamos classList para agregar o eliminar la clase hidden-1 según el estado checked del elemento #psi.

    Nota: También puedes utilizar document.getElementById() en lugar de document.querySelector('#psi') si quieres seleccionar el elemento #psi por su ID.

Comments are closed.