Aide pour couleur arrière plan dans un js

[photoclic]

Bonjour à tous,

Milouze m'avait écrit ce script pour compléter une info sous l'avatar dans les sujets et qui fonctionne très bien:

Code:


$(function(){
    if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
    var $this=$(this).find('.M14_blocSpan:eq(2)');
    var lienProfil=$(this).find('dt').find('a[href^="/u"]').attr('href');
    var stats="stats";
    var tout=lienProfil+stats;
    $.get(tout , function(data){
    $(data).find('#profile-advanced-details').each(function(){      
    if(lienProfil){
    var e=$(data).find('fieldset.stats-field.genmed:eq(1) label:contains("Evaluations positives données :")').closest('li').text();
    var f=e.substring(31,);                  
    $this.before('<div class="M14_blocSpan"><img class="label"src="https://i.servimg.com/u/f25/18/97/96/21/bouton10.png" title="Nombre de votes effectués"style="vertical-align: middle;"/><span style="color: #367780;"> :</span><span id="nbrevote">'+f+'</span></div>');                    
    }          
   //start tooltipster  
 $('.M14_blocSpan img.label').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });  
   //end tooltipster                        
    });});});  
});

Je souhaiterais colorier la variable f quand cette variable est <10 (en rouge sinon en vert).

J'ai essayé de modifier le script ainsi en ajoutant une condition pour changer l'arrière plan:

Code:


$(function(){
    if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
    var $this=$(this).find('.M14_blocSpan:eq(2)');
    var lienProfil=$(this).find('dt').find('a[href^="/u"]').attr('href');
    var stats="stats";
    var tout=lienProfil+stats;
    $.get(tout , function(data){
    $(data).find('#profile-advanced-details').each(function(){      
    if(lienProfil){
    var e=$(data).find('fieldset.stats-field.genmed:eq(1) label:contains("Evaluations positives données :")').closest('li').text();
    var f=e.substring(31,);                  
    $this.before('<div class="M14_blocSpan"><img class="label"src="https://i.servimg.com/u/f25/18/97/96/21/bouton10.png" title="Nombre de votes effectués"style="vertical-align: middle;"/><span style="color: #367780;"> :</span><span id="nbrevote">'+f+'</span></div>');                    

      if (f<10){
  $("#nbrevote").css('background','red');
  }
  else {
    $("#nbrevote").css('background','green');
   }
    
    }          
   //start tooltipster  
 $('.M14_blocSpan img.label').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });  
   //end tooltipster                        
    });});});  
})

Mais les couleurs s'affichent de façon aléatoire, je ne comprends pas pourquoi.

Merci pour votre aide.

[chattigre]

Bonjour,

Essayez comme ceci ?

Code:

$(function(){
    if(!_userdata["session_logged_in"])return;
    $('.postprofile').each(function(){
    var $this=$(this).find('.M14_blocSpan:eq(2)');
    var lienProfil=$(this).find('dt').find('a[href^="/u"]').attr('href');
    var stats="stats";
    var tout=lienProfil+stats;
    $.get(tout , function(data){
    $(data).find('#profile-advanced-details').each(function(){     
    if(lienProfil){
    var e=$(data).find('fieldset.stats-field.genmed:eq(1) label:contains("Evaluations positives données :")').closest('li').text();
    var f=e.substring(31,);                 
    $this.before('<div class="M14_blocSpan"><img class="label"src="https://i.servimg.com/u/f25/18/97/96/21/bouton10.png" title="Nombre de votes effectués"style="vertical-align: middle;"/><span style="color: #367780;"> :</span><span id="nbrevote">'+f+'</span></div>');                   
    if((parseInt(f, 10)) < 10) {
        $("#nbrevote").css("background-color", "red");
    } else {
        $("#nbrevote").css("background-color", "green");
    }
    }         
  //start tooltipster 
 $('.M14_blocSpan img.label').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        }); 
  //end tooltipster                       
    });});}); 
});

Est-ce que ça fonctionne mieux ?

Bonne journée !

[photoclic]

Bonjour chattigre,

Merci pour ton aide.
Les couleurs se mettent malheureusement toujours de façon aléatoire.

[chattigre]

Bonjour,

Règle vitale en Javascript (et en HTML, CSS...) : Un id est strictement unique sur une page.

Il faudrait donc remplacer tous les id qui apparaissent par des classes.

Si vous avez des scripts qui sont dépendants de ces id, il faudra aussi les changer.

Pour rappel, on a

Code:

#id .classe

en ce qui concerne les sélecteurs

Une fois le problème d'id multiple résolu, cela devrait fonctionner !

[photoclic]

Ah je ne connaissais pas cette règle.

Faut savoir que c'est le seul script qui semble me poser problème.

Dans ce script, j'ai remplacé
id="nbrevote" par  class="nbrevote"
et #nbrevote" par .nbrevote"
Mais cela ne règle pas le problème.

Quand tu dis que ce doit être unique dans une page, tu veux dire tous les id qui sont dans les scripts cochés sur les sujets? parce que j'en ai un sacré paquet.
Ou les id qui concerne le postbody, c'est à dire les script qui agissent sous ce qu'il y a sous l'avatar?

[photoclic]

J'ai vu que tu es sur mon fofo.
Merci pour cela.

j'ai fait un essai en désactivant la majeure partie des scripts sur les sujets mais le problème persiste.

[chattigre]

Re,

Un id ne doit apparaitre qu'une seule fois dans le contenu d'une page. Sur une même page, on ne peut pas avoir plusieurs div ou span avec un même attribut id

Dans ce que tu ajoutes, il faut faire attention : Si on n'ajoute qu'un seul élément, par exemple le menu "dernières notifications", on peut utiliser un id.
En revanche, si on ajoute plusieurs fois l'élément sur une même page, il faut utiliser des classes (par exemple la div d'une notification.

Pour le script, erreur de ma part
Voilà qui devrait mieux marcher :

Code:

    $(function(){
        if(!_userdata["session_logged_in"])return;
        $('.postprofile').each(function(){
            var $this=$(this).find('.M14_blocSpan:eq(2)');
            var lienProfil=$(this).find('dt').find('a[href^="/u"]').attr('href');
            var stats="stats";
            var tout=lienProfil+stats;
            $.get(tout , function(data){
                $(data).find('#profile-advanced-details').each(function(){      
                    if(lienProfil){
                        var e=$(data).find('fieldset.stats-field.genmed:eq(1) label:contains("Evaluations positives données :")').closest('li').text();
                        var f=e.substring(31,);                  
                        $(this).before('<div class="M14_blocSpan"><img class="label"src="https://i.servimg.com/u/f25/18/97/96/21/bouton10.png" title="Nombre de votes effectués"style="vertical-align: middle;"/><span style="color: #367780;"> :</span><span class="nbrevote">'+f+'</span></div>');                    
                        if((parseInt(f, 10)) < 10) {
                            $(this).parent().find(".nbrevote").css("background-color", "red");
                        } else {
                            $(this).parent().find(".nbrevote").css("background-color", "green");
                        }
                    }          
       //start tooltipster  
       $('.M14_blocSpan img.label').tooltipster({
        animation : 'fade',
        arrow : true,
        speed : 300,
        delay : 300,
        onlyOne : true,
        theme : 'tooltipster-default'
       });  
       //end tooltipster                        
   });});});  
    });

[photoclic]

Avec le $ placé ainsi dans ton script, le script ne fonctionne plus:

Code:

$(this).before('<div class="M14_blocSpan">

En le plaçant ainsi, le script refonctionne, mais je n'ai pas les couleurs!

Code:

($this).before('<div class="M14_blocSpan">

$this est une variable dans le script d'origine.

[chattigre]

Re,
En effet, je n'avais pas vu que $this était une variable.

this étant un mot clé réservé en Javascript, j'avais pris cela pour une faute de syntaxe...

J'ai changé le nom de la variable au passage pour éviter d'utiliser des mots réservés JavaScript.
Ceci semble fonctionnel après test de mon côté :

Code:

    $(function(){
        if(!_userdata["session_logged_in"])return;
        $('.postprofile').each(function(){
            var blocspan=$(this).find('.M14_blocSpan:eq(2)');
            var profil = $(this);
            var lienProfil=$(this).find('dt').find('a[href^="/u"]').attr('href');
            var stats="stats";
            var tout=lienProfil+stats;
            $.get(tout , function(data){
                $(data).find('#profile-advanced-details').each(function(){     
                    if(lienProfil){
                        var e=$(data).find('fieldset.stats-field.genmed:eq(1) label:contains("Evaluations positives données :")').closest('li').text();
                        var f=e.substring(31,);                 
                        blocspan.before('<div class="M14_blocSpan"><img class="label"src="https://i.servimg.com/u/f25/18/97/96/21/bouton10.png" title="Nombre de votes effectués"style="vertical-align: middle;"/><span style="color: #367780;"> :</span><span class="nbrevote">'+f+'</span></div>');                   
                        if((parseInt(f, 10)) < 10) {
                            profil.find(".nbrevote").css("background-color", "red");
                        } else {
                            profil.find(".nbrevote").css("background-color", "green");
                        }
                    }         
      //start tooltipster 
      $('.M14_blocSpan img.label').tooltipster({
        animation : 'fade',
        arrow : true,
        speed : 300,
        delay : 300,
        onlyOne : true,
        theme : 'tooltipster-default'
      }); 
      //end tooltipster                       
  });});}); 
    });

[photoclic]

Cette fois c'est tout bon chattigre

Un grand merci pour ton aide. Super!

Je passe en résolu.