Стилизация нескольких радиокнопок путем изменения кода Райана Фейта

Question

Я большой поклонник использования кода Райана Фейта "Стили флажков и радио-кнопок"
нажмите здесь для демонстрации

Я столкнулся с проблемой. Я создаю форму опроса, которая имеет два варианта использования кода Райана. При первом использовании используются большие кнопки «счастливый», которые спрашивают, счастливы ли вы, равнодушны или грустны по поводу поставленного вопроса. Второе использование для «Оцените ваш опыт от 0 до 10», где мне нужно будет использовать РАЗНОЕ и намного меньшую графику радиокнопок.

Я понял, что каждому экземпляру различных радиокнопок требуется свой собственный CSS и имя класса, но я попытался изменить код Райана самостоятельно и 1) я не Эйнштейн и 2) я в ужасный порыв, чтобы завершить некоторые другие проекты. Как я пытался это сделать, я поместил оператор IF в каждое предложение (перемещая фоновую позицию), ища className (class = "огромныйButton" vs class = "teenyWeeny"). Я либо получаю один из двух результатов:

• Оригинальные кнопки LARGE даже больше не отображаются.
• При нажатии на любую кнопку они исчезают

Есть ли кто-нибудь, кто знает, как мне нужно изменить код Райана так:

1. Разрешить несколько графиков и размеров
2. Убедитесь, что он действует только на указанное имя класса. элемент
3. Постирать мою одежду и сделать меня sammich

Если он не может сделать # 3, я буду в порядке с этим.

Answer 1

Я нашел решение, и я не могу поверить, что я был настолько наивен.

Мне пришлось различать функции, он все еще делал все экземпляры переключателей и блоков выбора невидимыми, но javascriptперезаписывал все функции, так как они все еще назывались одинаково, например, Custom.init и Custom.init.

Я переименовал 2-ю версию, CustomMini, а затем вместо функции загрузки окна в конце скриптаЯ просто поместил Custom.init и CustomMini.init внизу страницы и VOILA!

Две разные настраиваемые радиокнопки, использующие аналогичный скрипт.

Я полагаю, что должно бытьболее динамичный способ сделать это, но сейчас это работает, это хорошо.

Answer 2

Я бы сказал, скачайте еще одну копию сценария. В одном файле js замените все вхождения слова «styled» на ваше имя первого класса, а во втором файле js замените все вхождения слова «styled» на имя второго класса. Отрегулируйте высоту значков в файлах по мере необходимости в зависимости от значков, которые вы хотите использовать. Затем, как вы сказали, создайте отдельные классы CSS. Флажки / переключатели не должны влиять друг на друга, так как я думаю, что они используют разные скрипты с разными свойствами.

Answer 3

Вам не нужно трогать javascript - переопределения правил CSS должны работать.

• Применение класса к элементу, который обертывает меньший набор, если переключатели - часто набор полей подходит для такого рода вещей.
• Добавьте правила, которые применяют соответствующий размер и фоновое изображение только к элементам в вашем новом классе оболочки. Например, "fieldset.compact input {height: 14px}"