$div n'est pas une fonction.

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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,

16/09/2011, 15h32
okoweb
Code:

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.
16/09/2011, 15h34
SpaceFrog

toggleSlide() ?
16/09/2011, 15h42
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:

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.
16/09/2011, 15h52
okoweb
Citation:

Envoyé par galerien69

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

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

1 2 3 4 5 $('a').click(){ //Attraper le div correspondant $(this.hash). //suite du code }
16/09/2011, 16h12
Invité

Citation:

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

hum oui, mauvaise lecture de lhtml.
16/09/2011, 16h15
SpaceFrog
Code:

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()
16/09/2011, 18h15
okoweb

Code:

var $div

Je ne comprends par le role de $ devant div.
16/09/2011, 18h40
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.
16/09/2011, 21h41
SpaceFrog

$ dans ce cas ne sert à rien ...
c'est juste un nommage de variable un caractère autorisé dans le nom des variables ...
17/09/2011, 11h21
okoweb

Citation:

Envoyé par SpaceFrog

$ dans ce cas ne sert à rien ...

Voici !

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:

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">test</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">test</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:

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.

19/09/2011, 11h15
SpaceFrog

Code:

$(this).next('td.reveal').show();
19/09/2011, 12h36
yann18

Oui, c'est sûr que c'est mieux comme ça... :roll:
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... 8O
19/09/2011, 14h10
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:

$(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!
19/09/2011, 14h18
SpaceFrog

next ?
td est fils de tr non ?

Code:

$(this).closest('tr').children('.reveal')
19/09/2011, 14h32
yann18

Grand merci à vous. Je comprends mieux comment évoluer dans le DOM maintenant...
19/09/2011, 15h00
Invité

Citation:

next ?
td est fils de tr non ?

Message de 11h08

Citation:

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

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

ben regardes le markup...

Je (re)quote :

Citation:

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'.

Citation:

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

Personne n'en doute.

edit : gras pour le code
Code:

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">test</td> </tr>

Voir 40 message(s) de cette discussion en une page