Ersetzen Sie Wert mit Bild mit Jquery?

Question

Ich habe eine Seite mit vielen Kommentaren.

Die Codestruktur ist wie folgt:

+ <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> 

Was ich will ist folgendes zu tun:

1. Holen Sie sich den Wert von jeder Bewertung der Nutzer-Klasse "Klasse. (Es werden maximal 5 Werte annehmen:..... ein Excellent b Sehr gut c Gut d Schlechte e Sehr schlecht
2. Wenn Bewertung == 'Excellent' - Zeigen Sie ein 5-Sterne-Bild und entfernen Sie den 'Excellent' text
3. Wenn Bewertung == 'Sehr gut' - ein 4-Sterne-Bild anzeigen und entfernen Sie den 'Sehr gut' text
4. ...
5. ...
6. etc

Ist das schwer zu tun?

Answer 1

Dies sollte es tun:

$('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); 
}); 

Noch besser wäre, so etwas zu tun:

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

Und dann CSS-Klassen wie diese haben:

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; 
} 
... 

Wo die Text-Einrückung würde den regulären Text verbergen, den Sie ursprünglich dort hatten.