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 :

Factorisation du code jQuery


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2012
    Messages
    110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2012
    Messages : 110
    Par défaut Factorisation du code jQuery
    Bonjour,

    je suis plutôt novice en Jquery, j'arrive à sélectionner des class et à leur donner quelque chose à faire ( ici cacher/montrer un lien et cacher/montrer du texte )

    Seulement j'ai plusieurs liens et textes qui font la même chose. Je sais qu'on peut les selectionner en appelant la div au dessus et derriere chopper le selecteur cliqué via $this. Mais je n'y arrive pas, je pense que mon demarrage est mauvais.
    Si quelqu'un pouvait m'aiguiller ce serait super !

    Voila mon code :
    Code javascript : 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
      $('.146texte').hide();$('.146lien').hide();$('.152texte').hide();$('.152lien').hide();  
     
    $('a.146').click(function() {
        $('.146texte').slideToggle(400);
        $('.146lien').slideToggle(400);
    	$('a.146').hide();
    		return false;
      });
       $('.146lien').click(function() {
        $('.146texte').slideToggle(400);
    		$('.146lien').hide();
    		$('a.146').slideToggle(400);
    		return false;
      });
     
        $('a.152').click(function() {
        $('.152texte').slideToggle(400);
        $('.152lien').slideToggle(400);
    	$('a.152').hide();
    		return false;
      });
       $('.152lien').click(function() {
        $('.152texte').slideToggle(400);
    		$('.152lien').hide();
    		$('a.152').slideToggle(400);
    		return false;
      });
    et mon html
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="entry">'.$chaine1.'</div><div class="'.$id.'texte" style="display:none;"><p class="groupetexte">'.$chaine2.'</p></div>
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="readmore"><a class="<?php echo $page->ID ;?>" name="lire" href="#" ><?php echo __('LIRE LA SUITE <span class="rouge"><b>+</b></span>');?></a><a class="<?php echo $page->ID ;?>lien" href="#" ><?php echo __('FERMER');?></a></span> <div class="clr"></div>

  2. #2
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

    Tu utilise JQuery comme un document.getElementById mais avec des classes.

    Un des intérêts de JQuery c'est qu'il travail avec des listes.

    Au lieu de

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.146texte').hide();$('.146lien').hide();$('.152texte').hide();$('.152lien').hide();
    Applique une classe à tous les éléments que tu veux cacher et écrit simplement:

    $('.cachable') représente une liste d'éléments et $('.cachable').hide() appelle la fonction hide() pour chaqu'un d'entre eux.

    Je te recommande de regarder quelques tutos d'introduction à JQuery.
    Par exemple celui-ci

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2012
    Messages
    110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2012
    Messages : 110
    Par défaut
    Yes ! Merci pour le tuto !

    Par contre pour l'utilisation des classes, je ne peux justement pas mettre une classe identique à tous ( du coup j'aurais pu travailler avec des id en fait ) parce que tout les élements sont sur la même page. Du coup si je cache ou decache la classe, chaque lien va se cacher/decacher alors qu'il faut que ce soit seulement celui cliqué !
    C'est pour ça que je veux utiliser $(this)

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    sinon avec un selecteur multiple

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.146texte, .146lien, .152texte, .152lien').hide();
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Tu peux cumuler les classes

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div class="146texte cachable" style="display:none;">
    <div class="152texte cachable" style="display:none;">

  6. #6
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Juin 2012
    Messages
    110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juin 2012
    Messages : 110
    Par défaut
    Oui je comprends ça, je sais que je peux cumuler les class.
    Le problème reste le même !
    La j'ai deux liens et deux textes à cacher. Du coup c'est faisable à la main en entrant chaque id de chaque texte, mais le jour ou j'en ai 100 ! je vais pas entrer les 100 à la main ! Et j'aimerais "automatiser" la chose, que chaque fois que je rajoute un texte, je n'ai pas à rajouter une ligne de Jquery.

Discussions similaires

  1. factorisation de code
    Par calagan99 dans le forum ASP.NET
    Réponses: 7
    Dernier message: 21/05/2007, 09h00
  2. [C++] Factorisation de code
    Par xterminhate dans le forum C++
    Réponses: 6
    Dernier message: 07/11/2006, 16h21
  3. factoriser du code
    Par grabriel dans le forum Langage
    Réponses: 3
    Dernier message: 26/10/2006, 15h00
  4. Réponses: 7
    Dernier message: 01/08/2006, 11h58
  5. Réponses: 4
    Dernier message: 06/11/2003, 10h37

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