$div n'est pas une fonction. [Résolu]

[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 :

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,

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

[SpaceFrog]

toggleSlide() ?

[galerien69]

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.

[okoweb]

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
}

[galerien69]

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

hum oui, mauvaise lecture de lhtml.

[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()

[okoweb]

Code :

var  $div

Je ne comprends par le role de $ devant div.

[galerien69]

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]

Envoyé par SpaceFrog

$ 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 :

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 :

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 :

$(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...

[galerien69]

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!

[SpaceFrog]

next ?
td est fils de tr non ?

Code :

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

[yann18]

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

[galerien69]

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

[galerien69]

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 :

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>