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 :

Couleur de fond en fonction d'un champ


Sujet :

jQuery

  1. #1
    Futur Membre du Club
    Couleur de fond en fonction d'un champ
    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

  2. #2
    Invité
    Invité(e)
    Bonjour,

    switch / case ne fonctionne pas comme ça.

    utilise ici des if / else if / else.

  3. #3
    Futur Membre du Club
    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'
               })
        }
     
       });

  4. #4
    Invité
    Invité(e)
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    $('.prixm2').css({
                  'background-color':'red'
               })

  5. #5
    Futur Membre du Club
    Non ça fonctionne pas... J'espère pouvoir mettre la réponse très vite...

  6. #6
    Invité
    Invité(e)
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
            var $prixm2 = Number($('.prixm2').text());

  7. #7
    Membre habitué
    il faut boucler sur les éléments récupérés
    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
    $('.prixm2').each(function (ind, element) {
        let valeur = $(element).html();
        let color = 'white';
        if (0 <= valeur && valeur < 15) {
            color = 'red';
        }
        else if (15 <= valeur && valeur < 250) {
            color = 'red';
        }
        // etc ...
        // et enfin
        $(element).css({
            backgroundColor: color
        })
    });

  8. #8
    Futur Membre du Club
    Nope.... Avec un vulgaire php ca marcherait mais là c'est pas réellement une base de données. C'est un GeoJSON, une carte vectorielle pour le web qui se comporte comme une base de données. La syntaxe pour l'interrogation de la table attributaire est la même que pour une requête SQL.

    La recherche continue

    Sylvain

  9. #9
    Invité
    Invité(e)
    "ça ne marche pas", "ça fonctionne pas",...

    Ce n'est pas avec ça qu'on va avancer.

  10. #10
    Modérateur

    Bonjour,
    outre le fait que la construction de ta ligne
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    <td><h6><p> Prix au m² :</p><p class="prixm2">'+ feature.get('prixm2') +'</p></h6></td>

    est des plus étrange, mélange de HTML et JavaScript, comment est appelé ton script et comment initialises/récupères-tu le contenu.

  11. #11
    Futur Membre du Club
    Bonjour,

    http://geohistoire.alwaysdata.net/viewer/essaivisualiseur.php

    Voila le lien du projet.

    Vous pouvez sélectionner une entité avec Maj+Clic glissé. Dans la fenêtre à droite "Données", vous voyez les données qui s'affichent. Les données de chaque parcelle se retrouvent ici.

    La syntaxe étrange est une syntaxe qui est livrée plus ou moins toute prête (module Openlayers), j'ai essayé de mettre du HTML comme ça dans l'espace (info.push...) et ça marche. D'ailleurs je vois pas pourquoi ça ne marcherait pas.

    Le but de ce post est de savoir comment colorer le logo 'euro' en fonction de la valeur issue de 'feature.get('prixm2')'.

    Merci pour votre aide

    Sylvain

  12. #12
    Membre habitué
    Tout d'abord j'ai corrigé une coquille, avec un "q", dans mon code fait à la volée, il fallait lire element et non elelement.

    Cette mise en forme doit être faite une fois que le contenu de ton élément <div class="panel-body" id="info"> est mis à jour.

    EDIT :
    vu dans ton fichier interactions.js, cela devrait donner
    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
    if (info.length > 0) {
        infoBox.innerHTML = info.join('');
     
        $('.prixm2').each(function (ind, element) {
            let valeur = $(element).html();
            let color = 'white';
            if (0 <= valeur && valeur < 15) {
                color = 'red';
            }
            else if (15 <= valeur && valeur < 250) {
                color = 'red';
            }
            else if (250 <= valeur && valeur < 1000) {
                color = 'red';
            }
            else if (1000 <= valeur && valeur < 2000) {
                color = 'red';
            }
            else if (2000 <= valeur && valeur < 3000) {
                color = 'red';
            }
            else if (3000 <= valeur && valeur < 4000) {
                color = 'red';
            }
            else if (valeur > 4000) {
                color = 'red';
            }
            $(element).css({
                backgroundColor: color
            })
        })
    }