Заменить значение изображения с помощью 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 значений: а. Отлично б. Отлично с. Хорошо д. Бедные е. Очень плохой
2. Если оценка == «Отлично» - отобразите 5-звездное изображение и удалите текст «Отлично»
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;
}
...

Там, где текстовый отступ будет скрывать обычный текст, который у вас изначально был.