Discussion :

[sylvain257]

Bonjour,

Je cherche à modifier la couleur d'un champ en fonction de sa valeur. Je m'explique :

J'ai une valeur qui redescend d'une base de données et j'aimerais qu'en fonction de sa valeur, le paragraphe <p> s'affiche en vert, ou en rouge, ou en bleu....

J'ai donc défini une classe pour le dit paragraphe et utilisé un switch. Seulement ça marche pas et je ne sais pas du tout pourquoi...

Voila la ligne du tableau :

Code HTML :

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

<tr><td class="col1"><h6><p><i class="fas fa-euro-sign"></i></p></h6></td><td><h6><p> Prix au m² :</p><p class="prixm2">'+ feature.get('prixm2') +'</p>€</h6></td></tr>

feature.get('prixm2') me permet de récupérer une valeur de la base de données.

Et voici mon switch :

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
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
$(document).ready(function(){
        var featureprixm2 = function(feature){ 
        $prixm2 = feature.get('prixm2').html()
 
 
   switch($prixm2){
       case (0 <= $prixm2 && $prixm2 < 15):
           $('.prixm2').css({
              backgroundColor:'red'
           });
           break;
       case (15 <= $prixm2 && $prixm2 < 250):
           $('.prixm2').css({
               backgroundColor:'blue'
           });
        break;
           case (250 <= $prixm2 && $prixm2 < 1000):
           $('.prixm2').css({
               backgroundColor:'green'
           });
        break; 
       case (1000 <= $prixm2 && $prixm2 < 2000):
           $('.prixm2').css({
              backgroundColor:'pink'
           });
        break;
           case (2000 <= $prixm2 && $prixm2 < 3000):
           $('.prixm2').css({
               backgroundColor:'yellow'
           });
        break;
           case (3000 <= $prixm2 && $prixm2 < 4000):
           $('.prixm2').css({
               backgroundColor:'gray'
           });
        break;
           case (4000 <= $prixm2):
            $('.prixm2').css({
              backgroundColor:'orange'
            });
        break;
   }
 
        }});

Pourquoi ce code ne fonctionne pas ? Le pire c'est le débogueur de Chrome ne renvoie aucun message d'erreur. Facile pour savoir où ça cloche :/

Merci pour votre aide

Sylvain

[Invité]

Bonjour,

switch / case ne fonctionne pas comme ça.

utilise ici des if / else if / else.

[sylvain257]

J'ai essayé comme vous dites mais ça marche pas

Voila le code que j'ai essayé et qui ne renvoie aucune erreur....

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
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
 
$(document).ready(function(){
 
        $prixm2 = $('.prixm2').html();
 
        if(0 <= $prixm2 && $prixm2 < 15){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(15 <= $prixm2 && $prixm2 < 250){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(250 <= $prixm2 && $prixm2 < 1000){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(1000 <= $prixm2 && $prixm2 < 2000){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(2000 <= $prixm2 && $prixm2 < 3000){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(3000 <= $prixm2 && $prixm2 < 4000){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
        else if(4000 <= $prixm2){
           $('.prixm2').css({
              backgroundColor:'red'
           })
       }
    else{
         $('.prixm2').css({
              backgroundColor:'white'
           })
    }
 
   });

interactions.js

[Invité]

Code :

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

1
2
3
$('.prixm2').css({
              'background-color':'red'
           })

[sylvain257]

Non ça fonctionne pas... J'espère pouvoir mettre la réponse très vite...

[Invité]

Code :

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

        var $prixm2 = Number($('.prixm2').text());