Bonjour, 

    Je suis en train de faire des tests sur cette jolie progress bar que voici : https://codepen.io/shankarcabus/pen/GzAfb

Au début j'ai cherché à la faire changer de couleurs en fonction du % franchis :

$(function(){
  var $ppc = $('.progress-pie-chart'),
    percent = parseInt($ppc.data('percent')),
    deg = 360*percent/100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
    if (percent > 200) {
    $ppc.addClass('gt-200');

Par exemple ici on retrouve un palier pour 50% et un pour 200%.

Mais la c'est le drame. j'ai essayé d'ajouter un texte (<div class="mih">oui</div> par exemple) mais impossible de le changer en fonction du % j'ai vu qu'il y avait plusieurs méthodes pendant mes recherches mais je suis un peu perdu ça parait tout bête pourtant : /.

Ma question est donc quel ligne de code appliquer pour dire par exemple "if (percent > 50) alors le texte sera "bonjour" et "if (percent > 200) alors le texte sera "salut" ?

Merci beaucoup et bonne journée !

Cordialement

 Bonjour Armelle, merci pour ta réponse et désolé je n'étais pas sur le PC depuis.

Alors pas nécessairement "remplacer" mais plutôt "ajouter" la même sorte de variable mais avec du texte qui change 

si par exemple dans le HTML de https://codepen.io/shankarcabus/pen/GzAfb je rajoute  :

<div class="texte">oui</div>

Je chercherais par exemple à faire :

"if (percent > 50) alors TEXTE sera "Bonjour" et "if (percent > 200) alors TEXTE sera "Salut"

Comme la classe du % ci dessus.

-
Edité par ClémentCapo 3 octobre 2016 à 9:27:34

Bonjour,

A ce que je comprends, tu souhaites remplacer le pourcentage de ta progress bar par un texte en fonction du pourcentage.

Si c'est ça le texte est affiché en JS avec la ligne 

$('.ppc-percents span').html(percent+'%');

Remplace cette ligne par ta fonction conditionnelle est ça devrait être bon.

Bonjour, merci pour la réponse c'est presque ça , en fait ça serait plus "ajouter" que "remplacer" un peu comme ceci : 

  Ici par exemple TEXTE = "Remportez une caisse de champagne en remplaissant votre premier panier" et "if (percent > 100) alors TEXTE sera "Bravo !"

Faudrait-t'il du coup ajouter un second 

$('.ppc-percents span')

relié au html de type : 

<divclass="texte">Bravo</div>

? (je me perd un peu avec les conditions désolé ><)

ok alors dans ce cas ce que tu cherches à faire n'a rien à voir avec la progress bar. Cette fonction récupère une donnée percent préalablement déclarée en JS ou PHP à toi de me le dire. Il te faut maintenant définir une autre fonction qui affichera le texte voulu en fonction de percent (dans ta div "texte"). Mais n'utilise pas ta progress bar pour y parvenir, juste une instruction du style :

if(percent < 50){
$('.texte').html('blabla');
}

Comment déclare-tu percent ?

Je vois !! Je viens de tester ton Js avec <div class="texte"></div> ça marche super :o 

En gros pour tester mon code je change manuellement le percent https://codepen.io/shankarcabus/pen/GzAfb

Mais à terme je vais relier le data-percent à un programme de calcul de points ce qui donnerait :

<div class="progress-pie-chart" data-percent="{$totalPoints|intval}" (Du php donc) 

Mais en conclusion tu as résolus mon problème ce que je cherchais est tout simplement : 

if(percent > 100){
$('.texte').html('bravo');
}

Merci :)