Question

我对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）单选按钮选择改变

非常感谢任何帮助。谢谢！

罗汉

Answer 1

它不起作用，因为$$返回一个元素数组，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>

现在有一个唯一的ID可以使用Event.on

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

请注意，事件正在按'.amounts'进行过滤，期间说使用了班级名称如果您正在使用FireBug for FireFox或Chrome的开发人员工具，那么您可以直接在控制台中测试脚本的各个部分。通过键入$$('.amounts')

来查找选择器是否与您认为的元素匹配确实很有帮助

Answer 2

Alternegro的回答尝试使用迭代器将事件处理程序直接附加到“amount”无线电元素，但由于以下几个原因不起作用：

“$”函数不将css选择器作为参数，仅使用id。改为使用“$$”。
css“id”属性选择器应包括方括号“[]”。它也拼错了。 “amount-”应该是“amount-”以匹配示例中的id。或者只使用类选择器：“。amounts”。
没有可以在枚举上调用的“更改”方法。请改用invoke或其他可枚举的方法。

这个应该有效：

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

（YMMV在事件处理程序中使用“this”。我只检查了Firefox中的代码）

Answer 3

将这些复选框设为同一类更有效率，但您也可以尝试

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

使用Prototype JS观察单选按钮选择的变化

3 个答案: