Hi guys... again
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?
From stackoverflow
-
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.
Keith Donegan : Thank you so much Paolo. I truly appreciate your kindness and help!Paolo Bergantino : You are most certainly welcome.
0 comments:
Post a Comment