Remplacer la valeur par une image à l'aide de Jquery?

Question

J'ai une page avec beaucoup de commentaires.

La structure du code est la suivante:

+ <li id="li-comment-65" class="comment even thread-odd thread-alt depth-1"> 
    <div class="comment-body"> 
     <div id="comment-65"> 
      <div class="comment-author vcard"> 
       <img height="30" width="30" href="" alt="" />       
       <cite class="fn">keith</cite>     
      </div> 
      <div class="comment-meta commentmetadata"> 
       <a href="#">June 16, 2009 at 10:21 pm</a> 
      </div> 
      <div id="rating-65" class="rating-class">Excellent</div> 
      <p>Hiya</p> 
     </div> 
    </div> 
    </li> 

Ce que je veux faire est la suivante:

1. Obtenir la valeur de chaque classe 'classe de notation. (Il y aura un maximum de 5 valeurs:..... un excellent b Très bon c Bonne d Mauvaise e Très mauvais
2. Si note == 'excellent' - Afficher une image 5 étoiles et retirer le 'excellent' texte
3. Si == note 'Very Good' - Affiche une image 4 étoiles et supprimer le texte 'Très bon'
4. ...
5. ...
6. etc

Est-ce difficile à faire?

Answer 1

Cela devrait le faire:

$('div.rating-class').each(function() { 
    var value = $.trim($(this).text()); 
    var src; 
    switch(value) { 
     case 'Excellent': 
      src = 'fivestars.png'; 
      break; 
     case 'Very Good': 
      src = 'fourstars.png'; 
      break; 
     ...      
    } 
    $img = $('<img/>').attr('src', src); 
    $(this).html($img); 
}); 

Encore mieux serait de faire quelque chose comme ceci:

$('div.rating-class').each(function() { 
    var value = $.trim($(this).text()).replace(' ', '_').toLowerCase(); 
    $(this).addClass(value); 
}); 

Et alors les classes CSS comme celles-ci:

div.rating-class.excellent { 
    background-image: url(fivestars.png); 
    text-indent: -1000px; 
} 
div.rating-class.very_good { 
    background-image: url(fourstars.png); 
    text-indent: -1000px; 
} 
... 

Lorsque la text-indent cacherait le texte normal que vous aviez à l'origine.