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

**ysabel06** · 03/01/2019, 17h14

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

**SpaceFrog** · 03/01/2019, 17h16

oui un bouton donc sur le onclick du bouton tu changes son class ...

**ysabel06** · 03/01/2019, 17h26

Hello
mais du coup je dois mettre le onclick sur toutes les class,?
Merci

**Toufik83** · 03/01/2019, 20h01

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.

**ysabel06** · 03/01/2019, 20h45

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

**Toufik83** · 03/01/2019, 21h00

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 */
   });
});

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager