web-dev-qa-db-fra.com

masquer/afficher une image dans jQuery

Comment afficher/masquer l'image en cliquant sur l'hyperlien?

<script>
function getresource(id)
{
    if(id==4)
    {
       //show image
     }
    else if(id==5)
    {
         //hide image
     }

 } 
</script>
<a href="#" onclick="javascript:getresource('4');">Bandwidth</a>
<a href="#" onclick="javascript:getresource('5');">Upload</a>
<p align="center"> 
  <img id="img3" src="/media/img/close.png" style="visibility: hidden;" />
  <img id="img4" src="/media/img/close.png" style="visibility: hidden;" />
</p>
jqueryjquery-selectors
8
Rajeev

Quelle image voulez-vous cacher? En supposant que toutes les images, ce qui suit devrait fonctionner:

$("img").hide();

Sinon, à l'aide de sélecteurs, vous pouvez trouver toutes les images qui sont des éléments enfants du div qui les contient et les masquer.

Cependant, je vous recommande fortement de lire la documentation Jquery, vous auriez pu le découvrir vous-même: http://docs.jquery.com/Main_Page

19
TJHeuvel

Avec nom de classe d'image:

$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image

Avec identifiant:

$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image
4
sandeep kumar

Utilisez les manipulateurs .css() jQuery , ou encore mieux, appelez .show()/.hide() sur l’image une fois que vous avez obtenu un descripteur (par exemple $('#img' + id)).

BTW, vous ne devriez pas écrire des gestionnaires javascript avec le préfixe "javascript:".

2
Lightness Races in Orbit
<script>
function show_image(id)
{
    if(id =='band')
    {
       $("#upload").hide();
       $("#bandwith").show();
    }
    else if(id =='up')
    {
        $("#upload").show();
        $("#bandwith").hide();
    }
} 
</script>

<a href="#" onclick="javascript:show_image('bandwidth');">Bandwidth</a>
<a href="#" onclick="javascript:show_image('upload');">Upload</a>

<img src="img/im.png" id="band" style="visibility: hidden;" />
<img src="img/im1.png" id="up" style="visibility: hidden;" />
1
Feras Al Sous

Je sais que c’est un article plus ancien, mais il peut s’avérer utile pour ceux qui cherchent à afficher une image côté serveur .NET à l’aide de jQuery. 

Vous devez utiliser une logique légèrement différente.

Ainsi, $ ("# <% = myServerimg.ClientID%>"). Show () ne fonctionnera pas si vous avez masqué l'image à l'aide de myServerimg.visible = false.

À la place, utilisez les éléments suivants côté serveur:

myServerimg.Style.Add("display", "none")
0
A. Varma

Je devais faire quelque chose comme ça tout à l'heure. J'ai fini par faire:

function newWaitImg(id) {
    var img = {
       "id" : id,
       "state" : "on",
       "hide" : function () {
           $(this.id).hide();
           this.state = "off";
       },
       "show" : function () {
           $(this.id).show();
           this.state = "on";
       },
       "toggle" : function () {
           if (this.state == "on") {
               this.hide();
           } else {
               this.show();
           }
       }
    };
};

.
.
.

var waitImg = newWaitImg("#myImg");
.
.
.
waitImg.hide(); / waitImg.show(); / waitImg.toggle();
0
grinch