Discussion :

[yann18]

Bonjour/ bonsoir,

Simplement en cliquant sur un lien, j'essaye d'animer une div dans une table qui doit se révéler et/ ou se rétracter. Pour établir le lien, 'a' et 'div' ont le même id
La structure HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<td><a href="#test">reveal</a></td>
                </tr>
                <tr><td colspan="3"><div id="test">
                            <p>test</p>
                        </div></td>
                </tr>
                ...
                    <td><a href="#test1">reveal</a></td>
                </tr>
                <tr>
                    <td colspan="3"><div id="test1">
                            <p>test</p>
                        </div></td>

Le java-script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$('div').hide().css({height:0});
                $('a').click(function(){
                    var $div = $(this).attr('href');
                    if($div.is(':visible')){
                        $div.animate({height:0}, {duration:1000, complete:function(){
                                $div.hide();
                            }
                        });
                    } else{
                        $div.show().animate({height : '32px'}, {duration : 1000});
                    }
                    return false;
                });

Mais je me retrouve avec une erreur dans la console me disant que '$div' n'est pas une fonction. Je ne comprends...
merci,

[okoweb]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('div').hide().css({height:0});

Je ne trouve pas l'utilité des 2 méthodes. Elles se vallent. Double emploi. Ce n'est pas la résolution au problème mais faut déjà corrigé cela.

[SpaceFrog]

toggleSlide() ?

[Invité]

salut,

en complément : non c'est pas bien d'avoir deux id identiques. mets plutot une classe ou quelque chose dans le genre.

Quant à ton probleme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var $div = $(this).attr('href');
                    if($div.is(':visible')){

attr('href') te renvoit le la chaine de caractère que vaut l'attribut href, donc '#test1'.
et effectivement '#test1' nest pas une fonction.

[okoweb]

non c'est pas bien d'avoir deux id identiques

Où sont les id identiques? ce n'est que normal pour les ancres.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('a').click(){
    //Attraper le div correspondant
    $(this.hash). //suite du code
}

[Invité]

Où sont les id identiques? ce n'est que normal pour les ancres.

hum oui, mauvaise lecture de lhtml.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 var $div = $(this).attr('href');
                    if($div.is(':visible')){

$div est un string puisque tu y mets le href ...

et n'accepte donc pas le .is()

[okoweb]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var  $div

Je ne comprends par le role de $ devant div.

[Invité]

Il a pour but de dire que c'est un object jQuery. C'est une simple convention d'écriture.
Cela dit, ici c'est un fail puisque c'est un string, mais dans l'idée, c'est ca.

[SpaceFrog]

$ dans ce cas ne sert à rien ...
c'est juste un nommage de variable un caractère autorisé dans le nom des variables ...

[okoweb]

$ dans ce cas ne sert à rien ...

Voici !

[yann18]

Merci à vous pour ces réponses.
Je suis revenu sur la partie HTML. La précédente ne me plaisant pas (je pense au futur développement côté serveur):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<td><a href="#">reveal</a></td>
    </tr>
    <tr>
      <td colspan="3" class="reveal"><p>test</p></td>
    </tr>
    <tr>
      <td><a href="#">Viennois chocolat</a></td>
      <td>13 sept</td>
      <td><a href="#">reveal</a></td>
    </tr>
    <tr>
      <td colspan="3" class="reveal"><p>test</p></td>
    </tr>

Mais le souci reste le même pour moi. Quand je clique sur un lien avec une ancre, je n'arrive pas à atteindre la balise <td class="reveal"> qui s'ensuit, et seulement cette balise[/U]. J'ai en fait à chaque fois un couple lien - <td class>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('td.reveal').hide();
    $('a[href=#]').click(function(){
        $(this).next().$('td.reveal').show();    
     });

Pour le restant, je pense me débrouiller. Bien pensé pour slideToggle(), spaceFrog.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).next('td.reveal').show();

[yann18]

Oui, c'est sûr que c'est mieux comme ça...
Je n'ai plus de message d'erreur dans la console, mais (et là je n’y comprends plus rien), ''td.reveal'' n'apparaît toujours pas...

[Invité]

salut,

en fait, $(this) réfère sur ton a.
comme next prend le node "frère" après, tu trouves rien.

Faut que depuis a, tu choppes le tr parent. Et depuis ce tr parent, tu choppes le tr suivant, et après tu redescends vers ton .reveal.

Donc plus un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).closest('tr').next().find('.reveal')

Au passage, si ton td prend toute la ligne, tu as pe intérêt à mettre la classe reveal sur le tr directos!

[SpaceFrog]

next ?
td est fils de tr non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).closest('tr').children('.reveal')

[yann18]

Grand merci à vous. Je comprends mieux comment évoluer dans le DOM maintenant...

[Invité]

next ?
td est fils de tr non ?

Message de 11h08

Quand je clique sur un lien avec une ancre, je n'arrive pas à atteindre la balise <td class="reveal"> qui s'ensuit

[SpaceFrog]

a est dans le même tr ?
=> on peut y acceder par le closest, par le parent ....

[Invité]

ben regardes le markup...

Je (re)quote :

Quand je clique sur un lien avec une ancre, je n'arrive pas à atteindre la balise <td class="reveal"> qui s'ensuit

'a' n'est pas dans le même tr que 'td.reveal'.

=> on peut y acceder par le closest, par le parent ....

Personne n'en doute.

edit : gras pour le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    <tr>
      <td><a href="#">Viennois chocolat</a></td>
      <td>13 sept</td>
      <td><a href="#">reveal</a></td>
    </tr>
    <tr>
      <td colspan="3" class="reveal"><p>test</p></td>
    </tr>