Пользовательские графические Радио-кнопки с jQuery как-то нарушают index () - PullRequest
Новая
       90

Пользовательские графические Радио-кнопки с jQuery как-то нарушают index ()

0 голосов
/ 17 октября 2011

Я использую этот плагин customInput (с jQuery 1.6.2) для настройки внешнего вида моих радиокнопок.

Отлично работает.

Проблема, с которой я столкнулся сейчас, заключается в том, что я просто пытаюсь получить номер index() выбранного переключателя, и он всегда возвращает 0. Есть шесть переключателей, и я ищу число от 0 до 5.

JavaScript: 

$('input[name="amount"]').click(function() {
    var x = $(this).filter(':checked').index();
    var y = $(this).filter(':checked').val(); //<-- for troubleshooting
    alert(x + y);  //<-- for troubleshooting
});

Как ни странно, val() все еще работает нормально и возвращает правильное значение. Поэтому данные формы всегда получают правильное значение радиосвязи.

http://jsfiddle.net/sparky672/LdVGD/

HTML: 

<fieldset id="radioset">
    <input type="radio" id="radio-1" name="amount" value="Option 1" checked="checked" /><label for="radio-1" title="">Option 1</label>
    <input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label>
    <input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label>
    <input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label>
    <input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
    <input type="radio" id="radio-6" name="amount" value="Option 6" /><label for="radio-6" title="">Option 6</label>
</fieldset>

Когда просто не используется плагин customInput, возвращается номер индекса.

http://jsfiddle.net/sparky672/LdVGD/1/

Дополнительный вопрос:

После отключения плагина index() возвращает 0, 2, 4, 6, 8 или 10. Это похоже на то, что <label> сам подсчитывается в части index(), фактически удваивая счет. Почему это должно быть?

Я не могу удалить элементы <label>, так как плагин зависит от их работы.

Я просто хочу получить число от 0 до 5 в зависимости от того, установлен ли переключатель с 0 по 5.

Есть предложения? Возможно, другой способ проверить, какой переключатель выбран?

Моя конечная цель? Просто изменить некоторые переменные в зависимости от того, какая кнопка выбрана.

1 Ответ

1 голос
/ 17 октября 2011

Как вы заметили, ваш index вызов не совсем работает так, как вы ожидаете, когда вы не используете плагин. Из тонкой инструкции :

Если в метод .index() не передается аргумент, возвращаемое значение является целым числом, указывающим положение первого элемента в объекте jQuery относительно его родственных элементов.

Вы получаете значения в два раза больше, чем вы думаете, потому что элементы <label> также являются братьями и сестрами, поэтому в списке братьев и сестер есть пять элементов <input> и пять элементов <label>.

Когда вы активируете плагин, ваши переключатели переключаются в <div>, поэтому структура каждой кнопки выглядит следующим образом: 

<div>
    <input type="radio">
    <label>
</div>

Это оставляет переключатель с одним родным братом, <label> и index нуля.

У вас уже есть атрибуты id на ваших переключателях, так почему бы не использовать их для определения индекса? Примерно так: 

var index = parseInt(this.id.replace(/radio-/, ''), 10) - 1;

Проверьте третий номер в этих демонстрациях:

Или вы можете использовать форму элемента index:

Если .index() вызывается для коллекции элементов и передается элемент DOM или объект jQuery, .index() возвращает целое число, указывающее позицию переданного элемента относительно исходной коллекции.

Так что вы можете сделать это так: 

var i = $('input[name=amount]').index(this);

И несколько демонстраций:

...