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

凡文本缩进会隐藏您最初在那里的常规文本。