En este artículo, veremos cómo podemos ocultar o mostrar cualquier imagen en particular en jQuery cuando se hace clic en un botón. Esto es bastante fácil de hacer con algunas líneas de código jQuery. Antes de saltar al tema, sepamos qué métodos de jQuery se utilizarán para esto. Así que hay un método llamado show() y otro hide() , estos dos métodos de jQuery pueden hacer nuestro trabajo mucho más fácil.
Para este tutorial, usaremos el enlace CDN de jQuery para usarlo. Tenemos que pegar el siguiente código en nuestra página HTML dentro de la etiqueta principal. Este script se puede encontrar en el sitio web oficial de jQuery .
Enlace CDN de jQuery:
<guión src=”https://code.jquery.com/jquery-3.6.0.min.js” integridad=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anónimo”></script>
Ahora veamos cuál será el código jQuery para la funcionalidad que vamos a implementar en nuestra página.
HTML
<script>
$(document).ready(function () {
$("#image").hide();
$("#hide").attr('disabled', true);
$("#hide").click(function () {
$("#image").hide();
$("#hide").attr('disabled', true);
$("#show").attr('disabled', false);
});
$("#show").click(function () {
$("#image").show();
$("#hide").attr('disabled', false);
$("#show").attr('disabled', true);
});
});
</script>
El código escrito arriba será el encargado de ocultar o mostrar la imagen en nuestra página web. Hemos utilizado un método click() que se llamará cuando se haga clic en el botón de id (ocultar) y se llamará a otro método click() cuando se haga clic en otro botón de id (mostrar). En ambos métodos click(), se utilizan otros dos métodos que son ocultar y mostrar, que están vinculados con la etiqueta de imagen de id (imagen). Para que esta imagen se pueda modificar al hacer clic en el botón. Hemos agregado algunas funcionalidades más a los botones para que cuando la imagen sea visible, en ese momento el botón Mostrar esté atenuado y cuando la imagen no sea visible en ese momento, el botón Ocultar esté atenuado, esto dará algo más claridad para el usuario.
Ahora, para una vista clara, echemos un vistazo a nuestra página HTML con el código completo.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CDN link of jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<!-- Both buttons that will hide
or show the image -->
<button id="show">Show image</button>
<button id="hide">Hide image</button>
<!-- Image that will follow the
commands accordingly -->
<img id="image" src="gfglogo.png"
alt="Photo">
<!-- Code for hiding or showing image
on button click -->
<script>
$(document).ready(function () {
$("#image").hide();
$("#hide").attr('disabled', true);
$("#hide").click(function () {
$("#image").hide();
$("#hide").attr('disabled', true);
$("#show").attr('disabled', false);
});
$("#show").click(function () {
$("#image").show();
$("#hide").attr('disabled', false);
$("#show").attr('disabled', true);
});
});
</script>
</body>
</html>
Ahora, para verificar el código anterior, tenemos que abrir ese archivo HTML en nuestro navegador y ver la funcionalidad de los botones que hemos implementado.
Producción:
