How to highlight the selected custom icon with raty

Question

Hello,

I am using raty with the iconRange option and i am wondering how i can only highlight the selected custom icon.

my code is

$(".ratySmiley").raty({
    starType: 'i',
    hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
    iconRange: [
        {range: 1, on: 'icon icon-nothappy', off: 'icon icon-nothappy'},
        {range: 2, on: 'icon icon-mehh', off: 'icon icon-mehh'},
        {range: 3, on: 'icon icon-nomood', off: 'icon icon-nomood'},
        {range: 4, on: 'icon icon-happy', off: 'icon icon-happy'},
        {range: 5, on: 'icon icon-veryhappy', off: 'icon icon-veryhappy'}
    ]
});

Following the documentation, i only found one example where the single option is set to true but it only works if your icons are the same...

If you know something about it please help me.

Thomas

Answer 1

I found the solution,

I wrote a little js function which add an id = 'active' to the clicked smiley so i can tune it with css later.

function clickHandle(element, event) {
    $(element).children().each(function () {
        $(this).removeAttr("id");
    });
    $(event.target).attr("id", "active");
}

Hope it can helps you.

Thomas