Utiliser show hide individuellement sur une série d'images à l'intérieur d'un div

Je suis un membre de JQuery, et j'ai été chargé de terminer un projet au-delà de mes capacités. J'ai une série d'images chacune dans son propre div avec un paragraphe caché associé. Je peux utiliser un simple script show/hide pour obtenir le paragraphe du premier div à afficher et masquer correctement, mais une fois que j'ajoute plus de divs image au mélange, le code ouvre seulement la première image <P> ou toutes les <P>s à la fois. Clairement, j'ai besoin d'aide pour intégrer un équivalent de boucle CHACUN.Utiliser show hide individuellement sur une série d'images à l'intérieur d'un div

Voici le code:

<script> 
    $(document).ready(function(){ 

    $("#showr").click(function() { 
     $("p:eq(0)").show("slow", function() { 
     // use callee so don't have to name the function 
     $(this).next().show("slow", arguments.callee); 
     }); 
    }); 
    $("#hidr").click(function() { 
     $("p").hide(2000); 
    }); 

    }); 
    </script> 
    <style> 
    div { padding:0; float:left; position:relative; top: 140px; text-align:center} 
    p { background:#FFFFFF; margin:3px; width:300px; 
     display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000; } 
.over { z-index: 3000; } 
    </style> 
</head> 
<body> 
<div id="belt"> 
    <div class="panel"><img src="images/1.jpg" name="showr" id="showr"> 
    <p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br /> 
     <br /> 
     Display item text description<br /> 
     $price</p></div> 

     <div class="panel"> 
     <img id="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" /> 
    <p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br /> 
     <br /> 
     Display item text description<br /> 
     $price</p></div> 
    </div> 
    </body> 
    </html>

Source

2009-10-26 Caron

Essayez ceci:

<script> 
    $(document).ready(function(){ 
    $("img.showr").click(function() { 
     $(this).next('p').show("slow"); 
    }); 
    $("img.hidr").click(function() { 
     $(this).parent('p').hide(2000); 
    }); 

    }); 
    </script> 
<style> 
div { 
    padding:0; 
    float:left; 
    position:relative; 
    top: 140px; 
    text-align:center 
} 
p { 
    background:#FFFFFF; 
    margin:3px; 
    width:300px; 
    display:none; 
    position:absolute; 
    left:45%; 
    top: -20px; 
    text-align:left; 
    z-index: 3000; 
} 
.over { 
    z-index: 3000; 
} 
</style> 
</head><body> 
    <div id="belt"> 
     <div class="panel"> 
      <img src="images/1.jpg" name="showr" class="showr"> 
      <p> 
       <img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br /> 
       <br /> 
       Display item text description<br /> 
       $price 
      </p> 
     </div> 
     <div class="panel"> 
      <img class="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" /> 
      <p> 
       <img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br /> 
       <br /> 
       Display item text description<br /> 
       $price 
      </p> 
     </div> 
    </div> 
</body> 
</html>

NOTE: J'ai changé un peu jQuery et le balisage aussi. Demandez si vous avez besoin d'aide, ou il casse :)

Source

2009-10-26 22:16:51 Colin

Cela semble devoir fonctionner, mais hélas, ce n'est pas le cas. mes images sont maintenant juste assis là - même le premier de la série ne fonctionne pas. J'ai peur d'avoir foiré quelque chose dans la traduction. J'y travaillerai un peu plus et je verrai si je peux m'y mettre. Merci! – Caron

Utiliser show hide individuellement sur une série d'images à l'intérieur d'un div

Répondre

Questions connexes