jquery - проблема с проверкой / стилизацией переключателя, оборачивающего его привязкой

Question

Я пытаюсь настроить радио-кнопки с помощью jquery. Я знаю, что существует множество решений, но мне нужно установить другое изображение для каждой кнопки-переключателя. Это необходимо, потому что нет описания метки, поэтому каждый переключатель должен быть стилизован, чтобы понять его значение (пример: два переключателя, один с изображением, содержащим «$», и один «€» для проверки предпочтительной валюты).

Я создаю простую функцию под названием «Стилизация» (на самом деле я пробовал ее только на Firefox, но я заставлю ее работать до IE6 / 7 и предыдущих версий основных браузеров).

Кстати, эта функция, похоже, не работает должным образом, потому что она устанавливает атрибут флажка на всех переключателях, давая странный результат.

Вот скрипка , содержащая простой пример. Я проанализировал атрибуты с помощью firebug. На самом деле он не принимает разные имена классов для каждой радиокнопки, но это следующий шаг. Как вы видите, решение, над которым я работаю, состоит в том, чтобы обернуть переключатель с помощью тега привязки, а затем связать обработчик события onclick, чтобы выбрать его переключатель.

Что я могу сделать, чтобы заставить его работать должным образом? Спасибо, Алекс.

Answer 1

Вот рабочий пример: http://jsfiddle.net/bFYW6/2/

Ваша проблема была довольно простой: вы позвонили var wrapper = $(radio).parent(); перед тем, как закрутить радиоэлемент.Поэтому .parent() относится к элементу <form>, а не к <a>, в который вы пошли, чтобы обернуть элемент radio.

Все, что я сделал, это переключил порядок этих двух строк и вуаля!

Еще одно изменение, которое вы могли бы сделать, - заключительная строка, которая фактически связывает событие click с оболочкой.Вместо:

$(wrapper).click(function() {
    $(radio).attr("checked", true);
});

Вы можете сделать:

$(wrapper).click(function() {
    $(this).children().attr("checked", true);
});

Используя $(this) в приведенном выше примере, он всегда найдет элемент radio, который является его дочерним.Это позволяет вам затем вызывать функцию Stylize() только один раз: Stylize("#radio1, #radio2"); или Stylize("input[type=radio]");.

Пример: http://jsfiddle.net/bFYW6/6/

В качестве конечной точки не следует использоватьзаглавная 'S' для вашей функции Stylize().Начало функции с заглавной буквы в JavaScript, как правило, предполагает, что это функция конструктора для класса, которого у вас нет.