如何在jquery代码中重构这些回调？
如何在jquery代码中重构这些回调？
提问于 2012-11-19 03:12:05
守则如下：
<label>radio 1 </label>
<input type="radio" onchange="$('input2').show()" id="radio1" name="RadioGroup">
<label>radio 2 </label>
<input type="radio" onchange="$('input2').show()" id="radio2" name="RadioGroup">
<label>radio 3 </label>
<input type="radio" onchange="$('input2').hide()" id="radio3" name="RadioGroup">
<input type="text" id="input2">这些守则可能有两个缺点：
- 用于
onchange的jquery代码必须编写三次 - 只有当我单击/更改
onchange之一的时，才会执行代码。换句话说，当页初始化时，这些代码将执行而不是。例如，如果在初始化页面时检查radio3，则仍将显示input2..
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-19 03:51:00
我做了个快速的小提琴，把它重组了一下。
1)将类分配给显示输入的任何单选按钮，2)将另一个类分配给隐藏输入的任何单选按钮，)在管理操作的单独js文件中附加jQuery document.ready中的事件。
小提琴：http://jsfiddle.net/Kw4gu/2/
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>radio 1 </label>
<input type="radio" class="open" name="radioGroup" id="radio1">
<label>radio 2 </label>
<input type="radio" class="open" name="radioGroup" id="radio2">
<label>radio 3 </label>
<input type="radio" class="close" name="radioGroup" id="radio3">
<input type="text" id="input2">JS
$(document).ready(function() {
$(".open").on("change", function(event) {
$('#input2').show();
});
$(".close").on("change", function(event) {
$('#input2').hide();
});
});Stack Overflow用户
发布于 2012-11-19 03:15:29
您可以做的一件事是通过Javascript设置事件处理程序，而不是像这样将它们捆绑在HTML中。使用jquery选择器选择单选按钮，然后将事件添加到单个位置。
通过Javascript进行操作还使您在何时初始化代码、如何运行代码等方面具有更大的灵活性。
Stack Overflow用户
发布于 2012-11-19 04:02:44
您可以通过几种不同的方式来完成这一任务，但在jQuery中非常简单。我对您的HTML做了一些更新(为了便于选择，我给了两个类似的按钮一个公共类，并且我给所有按钮取了相同的名称，所以它们是同一个按钮组的一部分)。
<label>radio 1 </label>
<input type="radio" class="radioButton" id="radio1" name="buttonGroup">
<label>radio 2 </label>
<input type="radio" class="radioButton" id="radio2" name="buttonGroup">
<label>radio 3 </label>
<input type="radio" id="radio3" name="buttonGroup">
<input type="text" id="input2">现在，您必须编写选择器来隐藏或显示字段，具体取决于所选择的按钮。如下所示：
$(function() {
$('#input2').hide();
$('.radioButton').on('change', function() {
$('#input2').show();
});
$('#radio3').on('change', function() {
$('#input2').hide();
});
});注意，我刚开始在$('#input2').hide();中只是为了隐藏它，但是我通常会在CSS中这样做。
在任何情况下，您都可以看到一个在这个jsFiddle示例中工作的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13447130
复制相关文章
相似问题
腾讯云开发者
