Replace value with image using Jquery?

Question

I have a page with lots of comments.

The code structure is as follows:

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

What I want to do is the following:

Get the value from each 'rating-class' class. (There will be a maximum of 5 values: a. Excellent b. Very Good c. Good d. Poor e. Very Poor
If rating == 'Excellent' - Display a 5 star image and remove the 'Excellent' text
If rating == 'Very Good' - Display a 4 star image and remove the 'Very Good' text
...
...
etc

Is this hard to do?

Paolo Bergantino · Accepted Answer · 2009-06-17 00:31:31Z

3

This should do it:

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

Even better would be to do something like this:

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

And then have CSS classes like these:

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

Where the text-indent would hide the regular text you originally had there.

edited Jun 17, 2009 at 0:31

answered Jun 17, 2009 at 0:24

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Keith Over a year ago

Thank you so much Paolo. I truly appreciate your kindness and help!

Collectives™ on Stack Overflow

Replace value with image using Jquery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related