Kód, resp. jeho tvorba sa zvykne blbo vysvetľovať v textovej podobe, preto sa o to občas pokúsime formou videa. A keďže opakovanie je matka múdrosti, na začiatku videa si vypočujete to, čo ste práve prečítali :)

V tomto prvom brm.sk video tutoriále krok za krokom ukážem, ako pomocou jQuery spraviť hviezdičkové hodnotenie, ktoré sa používa v našich recenziách.

"Pre najlepšiu kvalitu zvoľte fullscreen HD.", odkázal Captain Obvious.
...

Yep, mohlo by sa zdať, že je to obyčajných 5 obrázkov, ktoré vždy manuálne pridám na koniec recenzie. Na to som ale moc lenivý. Mohlo by sa tiež zdať, že to bude nejaký wordpress plugin. To by bol ale zbytočný overkill. Pravda sa skrýva inde (vo videu ;) ).

Kód si samozrejme môžete stiahnuť a robiť s ním čo len chcete. Enjoy:

var review = $('.hodnotenie');
if (review.length > 0)
{
  var text = review.text().replace(',', '.').split('/'),
    rating = $.trim(text[0]),
    max = $.trim(text[1]),
    half = (rating.toString().indexOf('.') > - 1) ? true : false,
    star = '',
    html = '';
  
  for (var i = 0, floored = Math.floor(rating); i < max; i++)
  {
    if (i < floored) star = 'full_star';
    else if (half) { star = 'half_star'; half = false; }
    else star = 'no_star';
    
    html += '<img src="'+star+'.png" alt="'+star+'">';
  }
  
  review.html( html ).attr('title', rating+'/'+max);
}