Наблюдение за изменениями в выборе радиокнопок с использованием Prototype JS - PullRequest
Новая
       34

Наблюдение за изменениями в выборе радиокнопок с использованием Prototype JS

5 голосов
/ 10 марта 2011

Я относительно новичок в Prototype JS (v1.7), и я застрял на чем-то. Я пытаюсь определить, когда происходит изменение выбора переключателя. Вот код:

Радиокнопки: 

<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />

Javascript: Вот удар, который я взял на это, который не работает: 

Event.observe($$('amounts'), 'change', function(event) {
    alert('change detected');
});

При загрузке формы переключатели не отмечены. Я бы хотел, чтобы JavaScript обнаружил эти события:
1) Радиокнопка выбрана, если ни одна из них не была выбрана ранее
2) Переключатель выбора кнопки

Любая помощь будет принята с благодарностью. Спасибо!

  • Rohan

Ответы [ 3 ]

12 голосов
/ 10 марта 2011

Это не работает, потому что $$ возвращает массив элементов, а Event нуждается в одном элементе.Кроме того, $$('amounts') не соответствует ни одному элементу, теги <amounts> отсутствуют.

Лучше использовать один элемент-предок, который легко идентифицировать. 

<form id="amounts-form">
    <input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
    <input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
    <input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
</form>

Теперь для работы с уникальным идентификатором мы можем использовать Event.on

$('amounts-form').on('change', '.amounts', function(event) {
    alert('change detected');
});

Обратите внимание, что события фильтруются по '.amounts', точка говорит об использовании имени класса.
Если вы используете FireBug для FireFox или инструменты разработчика Chrome, вы можете протестировать части вашего скрипта прямо в консоли.Это действительно помогает определить, соответствует ли селектор тем элементам, о которых вы думаете, набрав $$('.amounts')

2 голосов
/ 17 марта 2011

Ответ Alternegro пытается использовать итератор для непосредственного присоединения обработчика событий к радиоэлементам «amount», но не работает по нескольким причинам:

  1. Функция "$" не принимает css-селекторы в качестве параметров, только идентификаторы. Вместо этого используйте «$$».
  2. Селектор атрибута css "id" должен содержать квадратные скобки "[]". Это также написано неправильно. «суммы» должны быть «сумма», чтобы соответствовать идентификаторы в примере. Или просто используйте селектор класса вместо: ".amounts".
  3. Нет метода "change", который можно было бы вызвать для перечислимых. Вместо этого используйте invoke или другой перечислимый метод.

Этот должен работать: 

$$("[id^=amount-]").invoke(
    'on', 
     'change',
     function(){alert("hello " + this.id)}
)

(YMMV использует «this» в обработчике событий. Я проверял только код в Firefox)

0 голосов
/ 10 марта 2011

Более эффективно просто присвоить этим флажкам один и тот же класс, но вы также можете попробовать 

$("id^=amounts-").change(function(){alert("blah blah")})
...