11549 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voilà je rencontre un problème auquel je n'arrive pas à trouver une solution, il s'agit pourtant d'un script extrêmement simple ayant pour but d'afficher et masquer un élément, en l’occurrence j'arrive bien à afficher l’élément mais pas à le re-masquer.

J'ai tous mis dans un JS Fillde : http://jsfiddle.net/KdpsC/1/

Vous pourrez constater que lorsque l'on reclique sur le liens, il ne se passe absolument rien, en fait l’événement n'est même pas détecté, car même si on met un "alert()" dedans il ne se déclenche pas.

1 heure que je tourne en rond, si certains d’entre vous se sente en veine merci de jeter un œil.

Mickael
Voici un fork qui fonctionne correctement, tout en allégeant ton code html.

http://jsfiddle.net/Super_baloo8/VDDz8/

Alors, juste pour explications :

- Les variables utilisés plusieurs fois, ou même les textes, sont regroupés au même endroit
- Sélecteur Jquery mis en cache
- Usage de la fonction "prop" à la place d"attr", qui si je ne raconte pas de bêtise, est déprécié (donc amener à disparaître dans une futur version)
- Chainage au maximum des actions
- Et pour éviter de s'embêter à faire 2 fonctions qui traite le même objet, j'ai préféré faire une approche qui compare l'état de l'élément à caché/montrer

A la finale, voici le code jQuery que ça donne :

var resalers_block = $('#resalers-block'),
    text_hide = 'Masquer la Liste des Revendeurs',
    text_show = 'Afficher la Liste des Revendeurs';

$('#resalers-area').on('click', 'a', function () {
    if (resalers_block.is(':hidden')) {
        resalers_block.show();
        $(this).text(text_hide).prop('title', text_show);
    } else {
        resalers_block.hide();
        $(this).text(text_show).prop('title', text_hide);
    }
});