Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Добавление класса с бэкграундом

Автор: Blaga 28.3.2011, 06:42

Всем привет, такой вот вопрос возник.
есть у меня нестандартные радтобаттоны.
Реализованы они через jquery ui.
выглядят они так:
user posted image

если выбрать текстовый варианты то они просто выделяются цветом.
А если выбрать звездочку то все предыдущие звездочки должны сменить бэкграунд. (так задается "звездность отеля")
Написал я скрипт небольшой для этого дела но вот проблема в хроме и осле работает отлично, а файерфокс и опера показывают неправильно. Только если два раза по одной и тойже звезде щелкнуть тогда выделятся предыдущие.
Код ниже:

Код


//радио батоны    
    $( "#radio" ).buttonset();                            
    $(".stars").click(function() {
    
            var radioId = this.id;
            radioId=radioId.substr(radioId.length-1,1);
            
            while(radioId>1) {
            
                $("#label"+radioId).addClass('ui-state-active');
                radioId--;
            }
            
        
    });

вроде бы все просто.
при клике на радио получаем его id. из id забираем последний символ (это число от 2 до 6)
и потом в цикле всем предыдущим добавляем класс с нужным бэкграундом.
Но почему то не хочет работать в файерфоксе и опере.
ссылка для ознакомления - http://a2themes.ru/demo/selectTour/

Всем заранее спасибо!

Автор: mcTep 28.3.2011, 15:11

Эти звездочки не совсем radiobutton в вашем случае. У вас они все с одинаковым именем, что говорит о том, что только одна из пяти кнопок может быть нажата. Видимо при щелчке плагин производит перерасчет значений и удаляет соответствующий класс "ui-state-active" у невыбранных элементов.

Можно попробовать создать свой класс с теми же свойствами как у "ui-state-active" и работать уже с ним. Но при этом не забывать удалять его у последующих радиокнопок.

Что-то типа того:

Код


$(".stars").click(function() {
    
            var radioId = this.id;
            radioId=radioId.substr(radioId.length-1,1);

            $(".star").removeClass('my-active');

            while(radioId>1) {
            
                $("#label"+radioId).addClass('my-active');
                radioId--;
            }
            
        
    });

Автор: Blaga 29.3.2011, 08:01

Спасибо, помогло. Как то не подумал что пользуюсь стандартным классом и его скрипт снимает... smile