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

nata031189 22.04.2012 01:01
Звездный рейтинг на 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.

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

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

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

razerxxx 22.04.2012 21:50
может. Вообще поидее можно даже просто 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"


Часовой пояс GMT +3, время: 01:05.