IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Code non fonctionnel


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Juillet 2017
    Messages : 6
    Par défaut Code non fonctionnel
    Bonjour,

    J'essaie de créer un script très simple qui cache ou montre une div lorsqu'on clique sur une puce (schématisée ici par V ou K). La fonction qui cache marche bien et remplace effectivement la classe "reducteur_ouvert" par "reducteur_ferme". Mais la fonction qui montre n'est pas appelée au clic. Je ne comprends absolument pas où est le problème. Voici le code. Merci pour votre aide !

    Jacques.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <!DOCTYPE html>
    <html>
    <head>
      <script type='text/javascript' src='../js/jquery-3.2.1.js'></script>
    </head>
    <body>
    <ul>
      <li><span class="reducteur_ouvert">V</span>
        <div>
          <ul>
            <li>foo</li>
            <li>bar</li>
          </ul>
        </div>
      </li>
     
    </ul>
     
    <script>
    $(document).ready(function() {
      $(".reducteur_ferme").click(function(){
        $(this).removeClass("reducteur_ferme");
        $(this).addClass("reducteur_ouvert");
        $(this).text('V');
        ($(this).parent().children("div")).show();
      });
     
      $(".reducteur_ouvert").click(function(){
        $(this).removeClass("reducteur_ouvert");
        $(this).addClass("reducteur_ferme");
        $(this).text('K');
        ($(this).parent().children("div")).hide();
      });
    });
    </script>
    </body>
    </html>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    La classe n'existe pas au départ dans le DOM.

    Il faut se raccrocher à un élément présent. 'body' par exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $('body').on( 'click',  'reducteur_ouvert ', function(){

    Cela dit, on peut largement simplifier le code.

    Indices : .toggleClass(), .slideToggle(),...

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Juillet 2017
    Messages : 6
    Par défaut
    Merci bien pour votre réponse. J'ai corrigé le script comme ci-dessous, mais... plus rien ne se passe !... Je dois faire une erreur grossière...

    En tout cas, je vois bien que votre argument est certainement le bon, mais je suis surpris (je suis quelque peu novice, comme vous vous en doutez) que les éléments en .reducteur_ferme doivent exister à l'ouverture de la page pour que le script s'applique. Je ne peux donc pas "travailler " sur un élément du DOM qui n'existe pas au départ ?... Merci encore.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <script>
    $(document).ready(function() {
      $('body').on( 'click',  'reducteur_ferme', function(){
        $(this).removeClass("reducteur_ferme");
        $(this).addClass("reducteur_ouvert");
        $(this).text('V');
        ($(this).parent().children("div")).show();
      });
      $('body').on( 'click',  'reducteur_ouvert', function(){
        $(this).removeClass("reducteur_ouvert");
        $(this).addClass("reducteur_ferme");
        $(this).text('K');
        ($(this).parent().children("div")).hide();
      });
    });
    </script>

  4. #4
    Invité
    Invité(e)
    Par défaut
    Autant pour moi.
    C'est (avec un point à '.reducteur_ouvert ') :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $('body').on( 'click',  '.reducteur_ouvert ', function(){
    voici un code plus concis, qui donne le même résultat :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    <ul>
      <li><span class="reducteur">V</span>
        <div>
          <ul>
            <li>foo</li>
            <li>bar</li>
          </ul>
        </div>
      </li>
    </ul>
    </body>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .reducteur ~ div { display:none; }
    .reducteur.ouvert ~ div { display:block; }
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $(document).ready(function() {
      $('body').on( 'click', '.reducteur', function(){
        $(this).toggleClass('ouvert');
        $(this).text( ($(this).hasClass('ouvert')? 'V':'K') );
      });
    });
    A étudier
    Dernière modification par Invité ; 26/07/2017 à 21h32.

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Juillet 2017
    Messages : 6
    Par défaut
    Arf, j'aurais dû voir le . manquant ! Merci bien, ça marche parfaitement ainsi.

  6. #6
    Invité
    Invité(e)
    Par défaut
    Le même, sans CSS : (j'ai mis 'Ouvrir' / 'Fermer' : c'est plus clair)

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>
    <ul>
      <li><li><span class="reducteur">Ouvrir</span>
        <div>
          <ul>
            <li>foo</li>
            <li>bar</li>
          </ul>
        </div>
      </li>
    </ul>
    </body>
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $(document).ready(function() {
      $('.reducteur ~ div').css({'display':'none'}); // on masque
      $('body').on( 'click', '.reducteur', function(){
        $(this).toggleClass('ouvert');
        $(this).siblings('div').toggle();
        $(this).text( (($(this).hasClass('ouvert'))? 'Fermer':'Ouvrir') );
      });
    });
    On peut assouplir l'ouverture/fermeture avec slideToggle() :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $(document).ready(function() {
      $('.reducteur ~ div').css({'display':'none'}); // on masque
      $('body').on( 'click', '.reducteur', function(){
        $(this).toggleClass('ouvert');
        $(this).siblings('div').slideToggle();
        $(this).text( (($(this).hasClass('ouvert'))? 'Fermer':'Ouvrir') );
      });
    });
    A tester...

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Juillet 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Juillet 2017
    Messages : 6
    Par défaut
    Merci beaucoup !

    J'aime bien la version avec css, c'est assez élégant je trouve (mais il est vrai que c'est oui/non, ça ne permet pas "l'adoucissement" que vous proposez).

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2013] Code non fonctionnel
    Par Jiben59 dans le forum VBA Access
    Réponses: 5
    Dernier message: 31/03/2016, 12h39
  2. [TinyMCE] Changement de version et code non fonctionnel
    Par heretik25 dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 14/12/2011, 18h25
  3. [POO] Code non fonctionnel
    Par xclam dans le forum Langage
    Réponses: 4
    Dernier message: 05/04/2007, 10h01
  4. Code non fonctionnel sous Firefox
    Par linar009 dans le forum Général JavaScript
    Réponses: 21
    Dernier message: 24/07/2006, 16h13
  5. Code non fonctionnel sous IE
    Par Nip dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 07/06/2006, 14h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo