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 :

Récupèrer les informations des <div> au clic


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 59
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Par défaut Récupèrer les informations des <div> au clic
    Bonjour a tous

    Nouvelle sur le forum, je suis une formation "apprendre a coder" et la ils nous ont demandé un exo qui me parait compliqué....
    (voici l'intitulé)
    Reproduire la matrice de l'image. Chaque élément (rond, carré, losange) peut avoir deux états : vide (pas de fond) et plein (un fond de couleur)
    Ajouter un bouton permettant de passer tous les éléments de l'état vide à l'état plein
    Ajouter un bouton permettant de passer tous les éléments de l'état plein à l'état vide
    Lors du clic sur un élément rond, changer son état (plein vers vide ou vide vers plein)
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="conteneur1">
     
     
     
    		<div class="carré1"></div>
     
    		<div class="rond1"></div>
    		<div class="rond2"></div>
    		<div class="rond3"></div>
    		<div class="rond4"></div>

    Code CSS : 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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
     
    #conteneur1{
    	padding-right: 20px;
    	padding-top: 20px;
    	padding-left: 20px;
    	padding-bottom: 20px;
    	display: flex;
    	justify-content: space-between;
     
    }
     
     
     
     
     
    .carré1{
    	width: 150px;
    	height: 150px;
    	background-color: blue;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
     
     
     
    }
     
    .rond1{
    	width: 150px;
    	height: 150px;
    	border-radius: 50%;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    }
    .rond2{
    	width: 150px;
    	height: 150px;
    	border-radius: 50%;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    }
    .rond3{
    	width: 150px;
    	height: 150px;
    	border-radius: 50%;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    }
    .rond4{
    	width: 150px;
    	height: 150px;
    	border-radius: 50%;
    	border-width: 2px;
    	border-style: solid;
    	border-color: black;
    }
    je me demande si je m y prend bien je suis novice.....

    mais tout ce que j ai vu sur le net ;je pensais a onclick ou:active
    je demande si justement avec le jquery il n y a pas plus simple

    Voila je vous remercie d avance si vous pouvez m aider
    Ysabel
    Images attachées Images attachées  

  2. #2
    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
    oui un bouton donc sur le onclick du bouton tu changes son class ...
    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 !

  3. #3
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 59
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Par défaut
    Hello
    mais du coup je dois mettre le onclick sur toutes les class,?
    Merci

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 509
    Par défaut
    l'attribut onclick est souvent utilisé quand on passe par du javascript pur, alors que jQuery("element").click ou $("element").click est utilisé quand on passe par la bibliothèque jQuery.

    dans ton cas, si tu veux utiliser jQuery proprement, il faut d'abord que tu saches comment importer jQuery dans une page html, tu sais le faire?
    si oui, montre nous ce que tu as mis comme code.

  5. #5
    Membre à l'essai
    Femme Profil pro
    Intégrateur Web
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 59
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Conseil

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Par défaut
    Bonsoir
    Merci d essayer de comprendre...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="forme.js"></script>
    voila

    Merci de ton soutien
    Ysabel

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 509
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 509
    Par défaut
    d'accord, donc ta page html doit ressembler à ça
    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
     
    <!DOCTYPE html>
    <html lang="fr">
      <meta charset="utf-8" />
      <title>Clique Divs</title>
      <head>
         <style>
             <!--ton style css ici, REMARQUE : trop de répétitions de propriétés, il faut optimiser ton css ...-->
         </style>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script src="forme.js"></script>
      </head>
      <body>
          <div id="conteneur1">
            <div class="carré1"></div>
            <div class="rond1"></div>
    	<div class="rond2"></div>
    	<div class="rond3"></div>
    	<div class="rond4"></div>
         </div>
      </body>
    </html>

    et puisque t'importe jQuery avant le script forme.js, tu peux alors mettre ton code jQuery directement dans le fichier js forme.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    $(document).ready(function(){//quand le document est prêt
       $("#conteneur1 div").click(function(){//attacher un événement clique sur tous les div existants dans le div ayant l'id conteneur1 
           console.log('vous avez cliqué sur le div ayant la class :' + $(this).attr('class') );
           /* ouvrir l'outil de développement du navigateur et cliquer sur l'onglet console, pour voir les console.log */
       });
    });

Discussions similaires

  1. Drupal : récupérer les informations des produits
    Par infoPFE dans le forum Bibliothèques et frameworks
    Réponses: 0
    Dernier message: 08/05/2013, 12h37
  2. Réponses: 2
    Dernier message: 13/10/2011, 16h08
  3. [XPATH] Récupérer les informations des nœuds parents
    Par sheepolata dans le forum Format d'échange (XML, JSON...)
    Réponses: 9
    Dernier message: 08/04/2010, 13h49
  4. [phpBB][3] Récupérer les informations des sondages et faire une page de statistiques
    Par boubouchon dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 06/04/2009, 20h47
  5. Récupérer les informations du scrollbar d'un DIV
    Par JauB dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/03/2008, 12h29

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