2010-05-08 6 views
0

Je suis nouveau en html en particulier à jquery mais je veux montrer montrer une photo sur le clic. J'ai tiré un exemple de code qui est exactement ce que je veux. Je n'ai pas écrit ce code et je souhaite modifier le code d'une image par rapport à une div. Le code est noté ci-dessous.Jquery comment faire image show hid

J'ai essayé ce de plusieurs façons différentes et Mon objectif:
1. Pour masquer une image par rapport à une balise div

Toute aide serait merveilleux

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    div { background:#def3ca; margin:3px; width:80px; 
    display:none; float:left; text-align:center; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

    <button id="showr">Show</button> 
    <button id="hidr">Hide</button> 
    <div>Hello 3,</div> 

    <div>how</div> 
    <div>are</div> 
    <div>you?</div> 
<script> 
$("#showr").click(function() { 
    $("div:eq(0)").show("fast", function() { 
    /* use callee so don't have to name the function */ 
    $(this).next("div").show("fast", arguments.callee); 
    }); 
}); 
$("#hidr").click(function() { 
    $("div").hide(2000); 
}); 

</script> 
</body> 
</html> 

<button id="showr">Show</button> 
<button id="hidr">Hide</button> 

<div id="div">Test</div> 

Répondre

1

Pour les images, il suffit de changer le div en img (ou de coller vos images dans les divs et de ne rien changer dans le script, quoi que flotte votre bateau), comme ceci:

$("#showr").click(function() { 
    $("img:eq(0)").show("fast", function() { 
    $(this).next("img").show("fast", arguments.callee); 
    }); 
}); 
$("#hidr").click(function() { 
    $("img").hide(2000); 
}); 

Les div parties du script ont été disant « correspondance <div> balises », puisque vous voulez <img> balises, vous pouvez simplement échanger dehors comme ci-dessus. En outre, je suppose que cela a été pris à partir d'autre chose/plus grand, dans ce cas, vous pouvez probablement supprimer la partie , arguments.callee, mais je ne suis pas sûr à 100%, dépend de ce qu'il était censé faire.

+0

Merci, et si vous avez 4 images et que je veux faire classe à quoi cela ressemblerait-il? – Michael

+0

@Michael - Dans ce cas, changez 'img' en' img.myClass', cela correspondrait aux éléments ''. Il y a une bonne intro qui vaut le coup de lire sur les sélecteurs ici aussi si vous avez quelques minutes :) http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Find_me:_Using_selectors_and_events –

+0

@ Nick - un peu comme ça? LesPaul Michael