оценка отзывов звездочки

[sergeyzzz]

Добрый день!

 

Хочу сделать вместо обычных круглешков при оценке в отзыве, чтобы были звездочки. как то можно реализовать такое, не используя дополнительных модулей?

[sergeyzzz]

с помощью javascript

подсказать можеш по коду?

[DevS]

Тебе нужно обернуть свои инпуты в div в данном случае дадим ему id="cool-stars" и сразу прописать начальный класс class="icon-large-stars-0", теперь каждому input даешь класс class="rating-hide".

В итоге у тебя должна получиться следующая структура:

<div id="rating-updated" class="icon-large-stars-0">
        <input type="radio" name="rating" value="1" class="rating-hide" />
        <input type="radio" name="rating" value="2" class="rating-hide" />
        <input type="radio" name="rating" value="3" class="rating-hide" />
        <input type="radio" name="rating" value="4" class="rating-hide" />
        <input type="radio" name="rating" value="5"  class="rating-hide" />
 </div>

 

Теперь создадим css стили. Я добавлю свою картинку , если что, можешь выбрать изображение и получше.
<style>
.rating-hide {
            opacity: 0;
            float: left;
            cursor: pointer;
            height: 14px;
            width: 14px;
  }

#rating-updated {
            background-image: url("../image/pic1.png");
            background-repeat: no-repeat;
            display: inline-block;
            vertical-align: text-top;
            height: 13px;
            width: 74px;
        }
.icon-large-stars-0 {
            background-position: 0 -272px;
        }
        .icon-large-stars-1 {
            background-position: 0 -288px;
        }
        .icon-large-stars-2 {
            background-position: 0 -304px;
        }
        .icon-large-stars-3 {
            background-position: 0 -320px;
        }
        .icon-large-stars-4 {
            background-position: 0 -336px;
        }
        .icon-large-stars-5 {
            background-position: 0 -352px;
        }
</style>

 

И последний шаг, немного js
<script>
    /*stars rating*/
    jQuery('.rating-hide').hover(
            /*навел*/
            function(){
                var stars = jQuery(this).val();
                jQuery('#rating-updated').attr('class','icon-large-stars-'+ stars);
            },
            /*убрал*/
            function(){
                var start = jQuery('input:radio[name=rating]:checked').val()
                if(typeof  start == 'undefined' ){start = 0; }
                    jQuery('#rating-updated').attr('class','icon-large-stars-'+ start)

            })
    jQuery('.rating-hide').click(function(){
        /*убираем checked у всех элементов*/
        jQuery('.rating-hide').each(function(){
            jQuery(this).attr( 'checked', false )
        });

        /*добавляем checked необходимому элементу*/
        jQuery(this).attr( 'checked', true );
    });
</script>

 

 

[Stealth421]

Супер! Спасибо! а что подправить чтоб после клика на звездочку, нужная оставалась выделенной?