Javascript-форум - Звездный рейтинг на js

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Звездный рейтинг на js (https://javascript.ru/forum/jquery/27704-zvezdnyjj-rejjting-na-js.html)

Звездный рейтинг на js

Код:

<div class="rating floatL">

<input type="radio" name="star2" id="star11"/>

<label for="star11"><span class="star"></span></label>

<input type="radio" name="star2" id="star21" />

<label for="star21"><span class="star"></span></label>

<input type="radio" name="star2" id="star31" />

<label for="star31"><span class="star"></span></label>

<input type="radio" name="star2" id="star41" />

<label for="star41"><span class="star"></span></label>

<input type="radio" name="star2" id="star51" />

<label for="star51"><span class="star"></span></label>

</div>

Код:

.shoppibleIndex .radio

{

        margin: 10px 0 0 0;

}

.shoppibleIndex .rating label {

    position: relative;

    display: inline;

    float: left;

    z-index:2;

    height:16px;

}

.shoppibleIndex .rating input[type=radio] {

    z-index: 1;

    display:inline;

    float: left;

    width:16px;

    height:16px;

}

.shoppibleIndex .star {

   background:url(../images/star.jpg) 0 0;

    height:23px;

    width:18px;

    z-index:1;

    position: absolute;

    top: 2px;

    display:block;

    cursor:pointer;

    left: -18px;

}



.shoppibleIndex .rating:hover .star {

    background-position: 0 0;

}

.shoppibleIndex input:checked ~ label .star {

    background-position:  18px 0;

        z-index:100;

}

.shoppibleIndex input:checked + label .star {

    background-position: 0 0;

}

.shoppibleIndex label:hover ~ label .star {

    background-position:  18px 0 !important;

}

И этот рейтинг работает, но не работает в IE
я попыталась написать код на js, который пока просто находит отмеченную звездочку и делает ее активной

Код:

.shoppibleIndex .starNoActiv

{

 background:url(../images/star.jpg)  18px 0;

}

.shoppibleIndex .starActiv

{

 background:url(../images/star.jpg)  0 0;

}

$(document).ready(function(){
	$('.vote input[type="radio"]').click(function()
	{
$(this).next().children().filter('span').addClass('starActiv');
	})
	
});

Подскажите как сделать, чтобы рейтинг нормально работал, то есть при клике по звездочке по левую сторону они заполнялись - class starActiv, а по правую становились не заполены - class starNoActiv.

Заранее спасибо.

как вариант - нумеруешь звездочки с помощью например - так: <span data-rating="3">...
при клике - проверяешь какой номер у текущей звездочки ну и соответсвенно все что меньше делаешь активным - все что больше неактивным.

но span не может принимать такой атрибут data-rating.

может. Вообще поидее можно даже просто rating - все будет работать, разве что валидатор будет ругаться. А вот с помощью data-* - вполне можно тегам назначать кастомные аттрибуты. Хотя можно даже и без дата атрибутов обойтись.
примерно так:

$('.vote input[type="radio"]').click(function() {
    var it = this;
    $('.vote input[type="radio"]').each(function() {
        if (it != this) {
            $(this).addClass('starActiv');
        } else {
            return false;
        }
    });
 
})

Здесь мы в цикле прогоняем весь список элементов - и если элемент не равен тому - на который кликнули - значит надо добавить класс. Если же равен тому на который кликнули - значит надо выйти из цикла.
Насчет data-rating - гугли "html data attributes"