Progress Bar : séléctionner l'élément courant

**Romenag** · 16/07/2018, 12h43

Bonjour,

Voici mon code

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
<img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
          <div class="col-sm-12 col-md-8">
 
            <input type="button" class="btn btn-primary col-md-2 animer" value="HTML/CSS">
 
            <div class="col-md-5">
 
 
              <div class="progress active">
 
                <div class="progress-bar 80"><span id="pourcentage" class="pull-right"></span></div>
 
              </div>
 
            </div>
 
          </div>
 
          <div class="col-sm-12 col-md-8">
 
            <input type="button" class="btn btn-primary col-md-2 animer" value="PHP">
 
            <div class="col-md-5">
 
 
              <div class="progress">
 
                <div class="progress-bar 60"><span id="pourcentage" class="pull-right"></span></div>
 
              </div>      
            </div>
 
          </div> 
 
 
        </div>

Avec en js :

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
function timer(n) {
 
  $(".progress-bar").css("width", n + "%");
  $("#pourcentage").text(n+"%");
 
  if(n < 80) {
 
    setTimeout(function() {
 
      timer(n + 1);
 
    }, 100);
 
  }
 
}
 
 
$(function (){
 
$("#animer").click(function() {
 
    timer(0);
 
  });
 
});

Mon but est de faire des jauge de compétences dynamique : On clique sur une compétence, et la jauge se rempli jusqu'au niveau actuel.
Je n'arrive pas sélectionner l'élément courant, toute mes jauge se remplissent en même temps. Help !!
Merci d'avance !!

**Romenag** · 16/07/2018, 13h18

modification du sujet

**Romenag** · 16/07/2018, 14h33

Re,

J'ai essayé de modifier ma fonctions à coup de $this, parent(), children(). Mais je n'y arrive pas, cela me dit à chaque fois que timer n'est pas une fonction.
Pourtant s'en ai bien une...

Help please !

**Romenag** · 17/07/2018, 11h39

Personne ?
J'ai aussi essayé d'ajouter des conditions du type if($(".progress-bar).hasClass("60"){...
Mais ça ne fonctionne pas...

Invité · 17/07/2018, 11h54

Bonjour,

Tu as oublié de préciser que tu utilises Bootstrap (quelle version ?) !...

D'autre part, un id doit être UNIQUE.
Sinon, on utilise une classe.

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
18
19
<img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
<div class="col-sm-12 col-md-8">
  <input type="button" class="btn btn-primary col-md-2 animer" data-max="80" value="HTML/CSS">
  <div class="col-md-5">
    <div class="progress active">
      <div class="progress-bar"><span class="pull-right"></span></div>
    </div>
  </div>
</div>
 
<div class="col-sm-12 col-md-8">
  <input type="button" class="btn btn-primary col-md-2 animer" data-max="60" value="PHP">
  <div class="col-md-5">
    <div class="progress">
      <div class="progress-bar"><span class="pull-right"></span></div>
    </div>
  </div>
</div>

Pour "cibler" le bon élément, il faut le transmettre à la fonction

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
function timer(btn, n) {
  let n_max = Math.min( btn.data('max'), 100); // maxi 100%
  btn.parent().find(".progress-bar").css("width", n + "%");
  btn.parent().find(".progress-bar span").text(n + "%");
 
  if (n < n_max) {
    setTimeout(function() {
      timer(btn, n + 1);
    }, 100);
  }
}
 
$(function() {
  $(".animer").on("click", function() {
    timer($(this), 0);
  });
});

Remarque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  <input type="button" class="btn btn-primary col-md-2 animer" data-max="80" value="HTML/CSS">

J'ai ajouté un attribut data-max (pourcentage max) sur chaque bouton.

**Romenag** · 17/07/2018, 12h20

Alors oui j'utilise Bootstrap v3.3.7. Et Jquery v3.3.1.

Et désolé si j'ai tronqué le code et qu'il n'était pas testable, c'était pour éviter de tout mettre, car je commence à avoir pas mal de lignes.

Voilà le code concerné :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="../css/main.css" type="text/css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
 
</head>
<body>
 
	<div class="col-md-12">
 
	  <h3> Compétences développement </h3>
 
	  <img class="col-sm-12 col-md-4" src="../images/compétences.png" alt="Compétences">
 
	  <div class="col-sm-12 col-md-8">
 
	    <input type="button" class="btn btn-primary col-md-2 animer" value="HTML/CSS">
 
	    <div class="col-md-5 parent">
 
 
	      <div class="progress active">
 
	        <div class="progress-bar 80"><span class="pourcentage pull-right"></span></div>
 
	      </div>
 
	    </div>
 
	  </div>
 
	  <div class="col-sm-12 col-md-8 parent">
 
	    <input type="button" class="btn btn-primary col-md-2 animer" value="PHP">
 
	    <div class="col-md-5">
 
 
	      <div class="progress">
 
	        <div class="progress-bar 50"><span class="pourcentage pull-right"></span></div>
 
	      </div>      
	    </div>
 
	  </div> 
 
 
	</div>
 
	<script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/functionsJS.js"></script>
 
    <script type="text/javascript">
        
        function timer(n) {
 
                  $(".progress-bar").css("width", n + "%");
                  $(".pourcentage").text(n+"%");
 
                  if(n < 80) {
 
                    setTimeout(function() {
 
                      timer(n + 1);
 
                    }, 100);
 
                  }
 
                }
 
                $(function(){
 
                $(".animer").click(function() {
 
                    $(this).css("backgroundColor", "red");
                    timer(0);
                    $(this).children().children().children(".progress-bar").addClass("progress-bar-danger");
 
                  }); 
 
 
                  
 
                });
 
    </script>
 
</body>
</html>

J'espère que vous pourrez me répondre avec ça...

Progress Bar : séléctionner l'élément courant

jQuery

Vue hybride

Discussions similaires

Partager

Partager