Плагин jQuery star rating, который очищает рейтинг при нажатии на звездочку с рейтингом?

#jquery #rating

#jquery — jquery — запрос #Оценка

Вопрос:

Это сбивает с толку, но, похоже, я не могу найти приличный плагин jQuery star rating, который очищает рейтинг при нажатии на звездочку с рейтингом (например: вы оцениваете 3 звезды, вы снова нажимаете на 3-ю звездочку, и рейтинг удаляется). Я продолжаю находить плагины, у которых есть эта глупая кнопка «очистить рейтинг» слева от звездочек. Когда я использовал prototype, я использовал ratingbox, который работал хорошо, но я не могу найти эквивалент jQuery.

Я был бы очень признателен за любые рекомендации!

1. Возможно, проще всего найти тот, который максимально соответствует вашим потребностям, а затем изменить его.

2. Я думаю, что это может быть правильным решением. Я надеялся, что кто-то там сделал это лучше, чем я бы, но я не нахожу этого. Пора запачкать руки!

Ответ №1:

Если вам не нужна какая-либо специальная функциональность, вы можете использовать мой код. Должно быть легко преобразовать его в плагин, если требуется.

Если вам не нужен эффект отслеживания наведения курсора мыши, просто удалите события mouseenter и mouseleave .

Установленный рейтинг сохраняется в атрибуте данных в div контейнера, вы можете получить к нему доступ через $('.rating').data('rating') .

Посмотрите живую демонстрацию с несколькими случайными изображениями из Интернета: http://jsfiddle.net/abPFF/1 /

HTML:

 <div class="rating" data-rating="3">
    <div></div><div></div><div></div><div></div><div></div>
</div>

CSS — файл:

 .rating { display:inline-block; padding:0px; }
.rating div { display:inline-block; width:48px; height:48px; margin:0px; background-image: url('star-off.png');}

.selected { background-image: url('star.png') !important; }
.highlighted { background-image: url('star.png') !important; }

Javascript:

 function ShowRating($element, rating){
    $stars = $element.find('div');
    $stars.removeClass('selected highlighted');
    rating = parseInt(rating);
    if(rating < 1 || rating > $stars.length) return;

    $stars.eq(rating-1).addClass('selected')
        .prevAll().addClass('highlighted');
    return;
}

$('.rating').each(function(){
    var $this = $(this);
    ShowRating($this, $this.data('rating'));
}).bind({
    mouseleave: function(){
        var $this = $(this);
        ShowRating($this, $this.data('rating'));
    }
}).find('div').bind({
    mouseenter: function(){
        var $this = $(this);
        ShowRating($this.parent(), $this.index()   1);
    },
    click: function(){
        var $this = $(this);
        var $parent = $this.parent();
        var idx = $this.index()   1;
        if($parent.data('rating') == idx){
            // Remove rating
            ShowRating($parent, 0);
            $parent.data('rating', 0);
        } else {
            // Set rating
            ShowRating($parent, idx);
            $parent.data('rating', idx);
        }
    }
});