Jqueryを使用してvalueをimageに置き換えますか？

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悪い 電子非常に悪い
2. 評価した場合==「優秀」 - 5つ星の画像を表示し、 == 'とても良い' の評価が 'エクセレント' テキスト
3. を削除する - の4つ星の画像を表示し、 'とても良い' テキスト
4. を削除...
5. ...
6. など

これは難しいですか？

Answer 1

これはそれを行う必要があります。

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

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

さらに良いことには、このような何かをすることですtext-indentはあなたが元々持っていた普通のテキストを隠すでしょう。