Показать сообщение отдельно
  #1 (permalink)  
Старый 22.04.2012, 01:01
Интересующийся
Отправить личное сообщение для nata031189 Посмотреть профиль Найти все сообщения от nata031189
 
Регистрация: 30.03.2012
Сообщений: 11

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

Заранее спасибо.
Ответить с цитированием