Plier/déplier seulement le div que je sélectionne au lieu de tous?

Salutations,Plier/déplier seulement le div que je sélectionne au lieu de tous?

Je suis un débutant qui vient de commencer avec jQuery. Je construis une application PHP de base pour notre équipe qui affiche une liste de tickets d'assistance ouverts.

Pour éviter d'encombrer l'écran, je veux seulement afficher le titre du ticket et si on clique dessus, sa description.

Voici mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>Animate my Div</title> 
     <style type="text/css" media="screen"> 
      a {     text-decoration: none;    } 
      #expand {     background-color: #fff;    } 
      #mydiv {     display: none;    } 
     </style> 
     <script src="jquery-1.3.2.js" type="text/javascript"></script> 
     <script type="text/javascript"> $(document).ready(function(){ 
    $("a").click(function(){ $("div").slideToggle(1000);    }); 
      });   </script> 
    </head> 
    <body> 
     <?php 
     $con = mysql_connect("korg", "joe", "bob"); 
     if (!$con) {    die('Could not connect: ' . mysql_error()); } 
     mysql_select_db("wfr11", $con); 
     $result = mysql_query(" select title, description from webcases"); 
     while ($row = mysql_fetch_array($result)) { 
     ?> 
      <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
      <div id="mydiv"><?php echo $row['description']; ?></div> 
     <?php 
     }   mysql_close($con);   ?> 
    </body> 
</html>

En ce moment, mes œuvres de code, mais se déploie tous les divs pour tous les billets ouverts, quel que soit le nom billet que je clique dessus.

Idéalement, j'aimerais montrer la description du nom du ticket sur lequel j'ai cliqué. Pas tous. C'est possible?

Merci pour votre aide.

Source

2010-11-23 Chris

Entièrement possible, oui.

Le premier problème que vous avez est que vous répétez un ID dans la boucle, les ID HTML doivent être uniques. Je suggère d'utiliser une classe là-bas. Envelopper les deux composants ensemble dans un DIV pour les faire pour un élément combiné qui peut être traité individuellement et

<?php 
while ($row = mysql_fetch_array($result)) { 
?> 
<div class="entry"> 
    <p><a href="#expand"><?php echo $row['title']; ?></a></p> 
    <div class="description"><?php echo $row['description']; ?></div> 
</div> 
<?php 
} 
?>

Ensuite, vous devez faire votre jQuery il suffit de sélectionner la description adjacente DIV.

$(document).ready(function(){ 
    $(".entry a").click(function() { 
    $(this).parents('.entry').find('.description').slideToggle(1000); 
    }); 
});

Rappelez-vous d'utiliser htmlentities() sur vos années d'écho de la base de données si elles ne sont pas déjà en bonne et due forme HTML.

Source

2010-11-23 00:17:41 Orbling

@Orbling: votre solution a fonctionné comme un charme !! Tout ce que j'avais à faire était de créer deux classes CSS pour ".description {display: none;}" et "entry {margin: 0; padding: 0px;}". – Chris

Est-ce que this.parentS() est une meilleure suite puisqu'elle ne sélectionne pas l'élément racine? Un autre post ci-dessous suggère d'utiliser this.parent() ... quelqu'un peut-il expliquer? – Chris

'.parent()' obtient le parent immédiat d'un élément, tandis que '.parents (selector)' obtient tous les parents correspondant à un certain sélecteur. Si vous utilisez '.closest (selector)' qui fonctionne comme '.parents()' mais qui ne choisit que le premier ancêtre par opposition à tous les correspondants. La façon dont je l'ai configuré permet à la structure HTML de modifier un peu tout en conservant la fonctionnalité - en supposant qu'une ancre dans une classe 'entry' ait un élément avec la classe 'description' qui peut être glissé. – Orbling

Oui, vous êtes après une bascule. Peut-être utiliser un identifiant pour sélectionner les divs que vous voulez plutôt que simplement la div plaine.

$(".link_class").click(function(){ $("#my_div").slideToggle(1000);    });

Ciblez des divs particuliers en affectant une classe au lien.

Source

2010-11-23 00:19:32

Plier/déplier seulement le div que je sélectionne au lieu de tous?

Répondre

Questions connexes