Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2012, 13:49
Аватар для razerxxx
Аспирант
Отправить личное сообщение для razerxxx Посмотреть профиль Найти все сообщения от razerxxx
 
Регистрация: 05.10.2011
Сообщений: 85

как вариант - нумеруешь звездочки с помощью например - так: <span data-rating="3">...
при клике - проверяешь какой номер у текущей звездочки ну и соответсвенно все что меньше делаешь активным - все что больше неактивным.
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2012, 14:01
Интересующийся
Отправить личное сообщение для nata031189 Посмотреть профиль Найти все сообщения от nata031189
 
Регистрация: 30.03.2012
Сообщений: 11

но span не может принимать такой атрибут data-rating.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2012, 21:50
Аватар для razerxxx
Аспирант
Отправить личное сообщение для razerxxx Посмотреть профиль Найти все сообщения от razerxxx
 
Регистрация: 05.10.2011
Сообщений: 85

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

Последний раз редактировалось razerxxx, 22.04.2012 в 21:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Разное оформление для посетителей с JS и без fry2 Events/DOM/Window 13 03.02.2012 17:45
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28
Не получается передать переменную из JS в PHP Lion_astana AJAX и COMET 2 23.11.2010 17:23
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28