Jquery를 사용하여 value를 image로 바꾸시겠습니까?

Question

많은 의견이있는 페이지가 있습니다. 다음과 같이

코드 구조는 다음과 같습니다

1. 각 '등급 수준의'클래스에서 값을 가져옵니다 :

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

   는 내가 뭘 원하는 다음이다. . 가 (5 개 값의 최대있을 것입니다 :.... 우수한 B 매우 좋음 다 좋은 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는 원래 가지고 있던 일반 텍스트를 숨길 것입니다.