Tengo dos botones de radio. Dependiendo de cuál esté marcado, quiero mostrar u ocultar un <div> en la página. Así que creé este controlador.
$(function () { $('input[name="Search.LatestOnly"]').on('change', function () { if ($(this).val() == 'true') $('#date-section').hide(400); else $('#date-section').show(400); }); }); Esto funciona bien. Pero quiero establecer la visibilidad de <div> en el estado correcto cuando se carga la página, así que agregué esta línea:
$('input[name="Search.LatestOnly"]:checked').trigger();Esto produce errores en tiempo de ejecución que no son significativos para mí.
excepción jQuery.Deferred: no se puede convertir indefinido o nulo en objeto TypeError: no se puede convertir indefinido o nulo en objeto en hasOwnProperty () en Object.trigger (https://localhost:44377/lib/jquery/dist/jquery.min.js: 2:70619) en HTMLInputElement. (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:72108) en Function.each (https://localhost:44377/lib/jquery/dist/jquery.min.js: 2:2976) en S.fn.init.each (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:1454) en S.fn.init.trigger (https:// localhost:44377/lib/jquery/dist/jquery.min.js:2:72084) en HTMLDocument. (https://localhost:44377/Data/Search:206:58) en e (https://localhost:44377/lib/jquery/dist/jquery.min.js:2:30005) en t (https:/ /localhost:44377/lib/jquery/dist/jquery.min.js:2:30307) undefined S.Deferred.exceptionHook @ jquery.min.js:2 t @ jquery.min.js:2 setTimeout (async) (anónimo ) @ jquery.min.js:2 c @ jquery.min.js:2 fuegoCon @ jquery.min.js:2 fuego @ jquery.min.js:2 c @ jquery.min.js:2 fuegoCon @ jquery.min .js:2 listo @ jquery.min.js:2 B @ jquery.min.js:2 jquery.min.js:2
TypeError no detectado: no se puede convertir indefinido o nulo en objeto en hasOwnProperty () en Object.trigger (jquery.min.js:2) en HTMLInputElement. (jquery.min.js:2) en Function.each (jquery.min.js:2) en S.fn.init.each (jquery.min.js:2) en S.fn.init.trigger (jquery. min.js:2) en HTMLDocument. (Buscar:206) en e (jquery.min.js:2) en t (jquery.min.js:2)
¿Alguien puede decirme cómo inicializar mi HTML para que el <div> se oculte o se muestre una vez que se cargue la página?
Estúpido yo. Olvidé incluir el nombre del evento.
$('input[name="Search.LatestOnly"]:checked').trigger('change');Gracias a un mensaje de error totalmente inútil allí, perdí mucho tiempo en un error muy estúpido.
Aquí hay un ejemplo práctico de mostrar/ocultar conectado a una entrada de radio, que verifica el valor verificado actual y se ejecuta inmediatamente, además de agregar el detector de eventos. Esperemos que esto agregue algo de perspectiva a su propio proyecto. Desafortunadamente, sin poder recrear el error, será difícil dar consejos más específicos. Siempre estaría feliz de revisar su proyecto por separado de esta respuesta.
Hice una cosita descarada en la que convertí el valor de la radio en el método deseado solo para reducir los pasos en los que normalmente tendría que escribir un condicional para manejar la comprensión del valor.
$(() => { const content = $("div"); const shown = $("input[name='test']:checked").val(); const handleShow = (method, t = 200) => content[method](t); handleShow(shown, 0); $("input").on("change", function () { const shown = $(this).val(); handleShow(shown); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> conditional content </div> <label> Show <input type="radio" name="test" value="show" checked> </label> <label> Hide <input type="radio" name="test" value="hide"> </label>Pensé que también incluiría un ejemplo de cómo lograr este objetivo en javascript vainilla, como un recurso para cualquier otra persona que se tope con la pregunta.
Dos cosas a tener en cuenta con esta respuesta, la altura máxima de 1rem en css no funcionará para todos los contenedores. Puede establecer dinámicamente la altura máxima o usar algo increíblemente alto (lo que afectaría las animaciones)
Esto no verifica el estado de "verificación" en el lanzamiento inicial, asume que siempre tendrá el mismo estado en el lanzamiento.
(() => { const $ = str => [...document.querySelectorAll(str)]; const content = $("div")[0]; const radios = $("input[name='test']"); radios.forEach(radio => { radio.addEventListener("input", e => { const val = e.target.value; if (val === "show") content.classList.remove("hidden"); else content.classList.add("hidden"); }); }); })(); div { max-height: 1rem; transition: max-height .2s; overflow: hidden; } .hidden { max-height: 0; } <div> conditional content </div> <label> Show <input type="radio" name="test" value="show" checked> </label> <label> Hide <input type="radio" name="test" value="hide"> </label>