Étoiles et vote

by ydelmas

HTML

<div class="article" data-ref="532">
    Premier (ref 532).
    [<span class="vote">
        <span class="etoile">
            <span class="etoile">
                <span class="etoile">
                    <span class="etoile">
                        <span class="etoile">&nbsp;</span>
                    </span>
                </span>
            </span>
        </span>
        évaluez-moi&nbsp;!
    </span>]
</div>

CSS

.etoile {
    padding: 1px 1px 1px 16px;
    display: inline-block;
   /* border: 1px solid blue;*/
    background-image: url(http://azrael.sha.univ-poitiers.fr/~ydelmas/2012-m2-js/briques/star-off.png);
    background-repeat: no-repeat;
    background-position: left center;
}
.etoile:hover {
    background-image: url(http://azrael.sha.univ-poitiers.fr/~ydelmas/2012-m2-js/briques/star.png);
}
.article {
    padding: 0.5ex 1ex;
    border: 1px solid red;
}

JavaScript

$(document).on('click', '.etoile', function() {
    var ref = $(this).parents('.article').attr('data-ref');
    var vote = $(this).parents('.etoile').length + 1;
    alert('article : '+ ref + '\nvote : ' + vote);
    return(false); // pour éviter la “remontée de bulle” du click
});