Il y a quelque temps, j'ai utilisé cette fonction simple pour masquer / afficher divs ':

$(document).ready(function() {
  $('#job_desc').hide();
  $('#slick-toggle').click(function() {
    $('#job_desc').toggle(400);
    return false;
  });
});

Comme vous pouvez le voir, je cache simplement le div avec l'id job_desc lorsque le document est prêt, créant également une fonction qui bascule l'état du div lorsque l'utilisateur clique sur le lien avec l'identifiant slick-toggle.

Et bien les temps changent, maintenant je génère les div en utilisant une boucle php comme:

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<div id="job_desc['.$row["id_exp"].']">'.$job_desc.'</div>'
}

À ce stade, je suis bloqué, je sais que je dois générer non seulement les div dynamiquement, mais aussi les boutons bascule pour chaque div.

Je ne sais vraiment pas comment:

  1. Changer ma fonction jquery afin de travailler avec les div générés dynamiquement
  2. Comment masquer tous les div lorsque le document est prêt.
2
DomingoSL 10 oct. 2011 à 18:36

3 réponses

Meilleure réponse

Vous pouvez facilement le faire en utilisant des classes (ceci n'est pas testé mais devrait fonctionner):

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'</div>';
}

Jquery:

$(document).ready(function() {
   $('.hidable').hide();
   $('.hidable').click(function() {
    var the_id = $(this).attr('id');
   $('#'+the_id).toggle(400);
  });
});

MODIFIER:

Comme je l'ai dit dans mon commentaire, je n'ai pas vu la partie où vous dites que vous voulez une balise de lien pour basculer le masquer / afficher. Si cela est nécessaire pour votre conception, vous pouvez facilement implémenter le même mécanisme et simplement ajouter un retour: false; ou event.preventDefault () pour éviter que le navigateur ne suive le lien; de toute façon, donnez-lui simplement une classe et un ID (unique), et récupérez ce dernier en utilisant l'ancien.

J'ai passé quelques minutes à réfléchir à une solution mais peut-être que je ne comprends pas ce que vous voulez vraiment. Un single qui cache / dévoile toutes les divs?

$('.hidable').hide();
$('a#slick-toggle').click(function(){
  $('.hidable').toggle(400);
  return false;
}

Ou voulez-vous un lien différent pour chaque div?

MISE À JOUR:

Pas la solution la plus élégante, mais devrait fonctionner:

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'<a class="slick-toggle" href="desc'.$row['id_exp'].'">toggle</a></div>';
}

Jquery:

$(document).ready(function() {
    $('.hidable').hide(); // hides all divs;
    $('a.slick-toggle').click(function(){
      var the_id = $(this).attr('href');  //gets href
      var div_id = $('#job_' + the_id);  //takes the div id, which is made up with the href
      $(div_id).toggle(400);  //now can match the div
      return false;
    }
});
3
Damien Pirsy 10 oct. 2011 à 15:22

Je fais ce qui suit pour afficher / masquer les divs ....

J'utilise d'abord le JS suivant dans toutes les pages (c'est-à-dire lié à un seul fichier js)

$('.togglelink').live('click',(function(event) {
        event.preventDefault();
        $('#' + $(this).attr('href')).toggle();
    })
);

Je peux le décomposer comme suit:

$('.togglelink').live('click',(function(event) {

Tout élément qui apparaît (.live) sur ma page avec la classe togglelink - effectuez l'action dans la fonction

event.preventDefault();

Arrêtez la valeur par défaut - c'est à dire le navigateur suivant le lien

$('#' + $(this).attr('href')).toggle();

Basculer le div avec l'ID dans l'attribut href de l'ancre ......

Pour que cela fonctionne, je génère le code HTML suivant

<span class="toggleright"><a class="togglelink" href="showdetails">Show / Hide</a></span>
<span class="subheading">A Heading</span>
<div id="showdetails" style="display:none;">
Some content
</div>

J'utilise ensuite CSS pour faire flotter le show / hide à droite de la page

1
Manse 10 oct. 2011 à 14:44

Y a-t-il une raison pour définir l'ID du div en tant que tableau? Je voudrais juste définir l'ID pour être quelque chose comme

echo '<div id="job_desc_'.$row["id_exp"].'">'.$job_desc.'</div>';

Le lien slick-toggle pour masquer / afficher le div devrait être mis à jour pour appeler une fonction avec le paramètre ID pour le div approprié ... ou défini avec un attribut avec l'ID correspondant que vous pouvez récupérer lorsque vous cliquez dessus. cache le div droit.

$(document).ready(function() {
  $('div[id^="job_desc_"]').hide();
});

Cela masquera toutes les divs avec des identifiants commençant par job_desc_

0
Aaron W. 10 oct. 2011 à 14:54
7714359