Lista de cosas que probé
Para comenzar: sí, tengo onLoad al comienzo de mi secuencia de comandos y todos los demás componentes funcionan perfectamente. Sí, he intentado buscar en Google y nada soluciona el problema. Esto no es un duplicado.
$("button").click(function(){ $("block").addClass("hidden"); //class hidden is display: none $("block").removeClass("hidden"); }Este es mi código. No, el bloque no es una clase o ID, lo usaré como ejemplo. Por favor, ayuda, no sé qué hice mal en mi código y por qué esto no funciona.
Por cierto, agregar la clase funciona, eliminarla no.
HTML:
<block>A</block>¿Quizás esto es lo que estás buscando?
$("button").on("click",function(){ $("block").toggleClass("hidden") }) .hidden { visibility: hidden } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <block>A</block> <button>hide/show</button> En lugar de display , utilicé el atributo de visibilty para asegurarme de que nada se mueva. El método jQuery .toggleClass("hidden") agrega o elimina la clase "hidden".
Y, dado que realmente desea ver cómo se mueven las cosas, puede hacer esto:
$("button").on("click",function(){ $("block").toggleClass("hidden") }) .hidden { display: none } <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <block>A</block> <button>hide/show</button> Sugerencia : en una aplicación real, probablemente debería hacer que el selector "block" un poco más específico. Con la versión actual del script, todos los elementos <block> se verán afectados. Una forma ligera de apuntar solo al elemento que viene antes del botón sería usar algo como $(this).previous() .
¿Se está desencadenando el evento? Sé que el click está en desuso, pero debería ser compatible por compatibilidad, también puede imprimir el botón y ver si la clase todavía está allí, la forma correcta debería ser usar on
$("button").on("click", function () { $("block").addClass("hidden"); //class hidden is display: none $("block").removeClass("hidden"); console.log($("block")) //look for classList })si solo desea ocultar un elemento, también puede usar
$("block").hide() $("block").show()o con fundido de entrada/salida
$("block").fadeOut(500) // number of ms $("block").fadeIn(500) una cosa más en caso de que esté confundiendo propiedades y clases de css, una propiedad de css se puede cambiar usando css
$("block").css({display:"hidden"}) $("block").css({display:"block"})