用Jquery替換圖像的值？

Question

我有一個有很多評論的頁面。

的代碼結構如下：

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

我想要做的是以下幾點：

1. 從每個「評級級」類中獲得的價值。 。 （將有最多5個值是：。 一個優秀 b非常好 良好的C d差 E極可憐的
2. 如果評級== '優秀' - 顯示五星形象，刪除 '優秀' 文本
3. 如果評級== '非常好' - 顯示爲4星級的圖像，並刪除了 '非常好' 的文字
4. ...
5. ...
6. 等

這難辦嗎？

Answer 1

這應做到：

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

更妙的是做這樣的事情：

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

再有CSS類這樣的：

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

凡文本縮進會隱藏您最初在那裏的常規文本。