javascript 使用 Prototype JS 观察单选按钮选择的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5255911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Observing change in radio button selection using Prototype JS
提问by Rohan
I'm relatively new to Prototype JS (v1.7), and I'm stuck on something. I'm trying to detect when a change in the radio button selection occurs. Here's the code:
我对 Prototype JS (v1.7) 比较陌生，并且被困在某些事情上。我试图检测单选按钮选择何时发生变化。这是代码：
Radio buttons:
单选按钮：
<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: Here's a stab I took at it, which doesn't work:
Javascript：这是我对它进行的一次尝试，但不起作用：
Event.observe($$('amounts'), 'change', function(event) {
alert('change detected');
});
When the form loads, no radio buttons are checked. I'd like the Javascript to detect these events:
加载表单时，不会选中任何单选按钮。我希望 Javascript 检测这些事件：
- A radio button is selected when none was previously selected
- The radio button selection changes
- 先前未选择单选按钮时选择单选按钮
- 单选按钮选择更改
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by clockworkgeek
It doesn't work because $$returns an array of elements and Eventneeds a single element. Also $$('amounts')doesn't match any elements, there are no <amounts>tags.
它不起作用，因为$$返回一个元素数组并且Event需要一个元素。另外 $$('amounts')不匹配任何元素，没有任何<amounts>标记。
A better way is to use a single ancestor element which is easy to identify.
更好的方法是使用易于识别的单个祖先元素。
<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>
Now there is a unique ID to work with we can use Event.on
现在有一个唯一的 ID 可以使用我们可以使用 Event.on
$('amounts-form').on('change', '.amounts', function(event) {
alert('change detected');
});
Notice the events are being filtered by '.amounts', the period says to use the class name.
If you're using FireBug for FireFox or Chrome's developer tools then you can test parts of your script directly in the console. It really helps to find if a selector is matching the elements you think it is by typing $$('.amounts')
注意事件被过滤'.amounts'，句号表示使用类名。
如果您使用 FireFox 的 FireBug 或 Chrome 的开发人员工具，那么您可以直接在控制台中测试部分脚本。通过键入来查找选择器是否与您认为的元素匹配真的很有帮助$$('.amounts')
回答by benrifkah
Alternegro's answer attempts to use an iterator to attach the event handler directly to the "amount" radio elements but doesn't work for a few reasons:
Alternegro 的回答尝试使用迭代器将事件处理程序直接附加到“数量”无线电元素，但由于以下几个原因而不起作用：
- The "$" function doesn't take css selectors as parameters, only ids. Use "$$" instead.
- The css "id" attribute selector should include square braces "[]". It's also spelled wrong. "amounts-" should be "amount-" to match the ids in the example. Or just use a class selector instead: ".amounts".
- There is no "change" method that can be called on enumerables. Use invoke or some other enumerable method instead.
- "$" 函数不接受 css 选择器作为参数，只有 ids。改用“$$”。
- css“id”属性选择器应该包含方括号“[]”。也写错了。"amounts-" 应该是 "amount-" 以匹配示例中的 id。或者只是使用类选择器：“.amounts”。
- 没有可以在枚举上调用的“更改”方法。改用 invoke 或其他一些可枚举方法。
This one should work:
这个应该有效：
$$("[id^=amount-]").invoke(
'on',
'change',
function(){alert("hello " + this.id)}
)
(YMMV using "this" in the event handler. I only checked the code in Firefox)
（YMMV 在事件处理程序中使用“this”。我只检查了 Firefox 中的代码）
回答by Alternegro
Its more efficient to just give those checkboxes the same class but u can also try
给这些复选框设置相同的类更有效，但你也可以尝试
$("id^=amounts-").change(function(){alert("blah blah")})
