如何重构jQuery代码中的这些回调？

的代码如下所示：如何重构jQuery代码中的这些回调？

<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代码才会执行当我点击/更改其中radio。换句话说，当页面被初始化时，将会执行这些代码而不是。例如，如果在页面初始化的radio3被选中，input2仍将显示..

来源

2012-11-19 Hanfei Sun

使用内联jQuery必须是某种形式的亵渎。您应该使用不显眼的JavaScript –

对于＃2，您想要将逻辑提取到具有自定义事件的逻辑或处理程序的声明函数中。然后，您可以调用该函数或在页面加载时触发事件。同时考虑1和2，你可能会把所有的信息放在同一个函数中。给无线电相同的名称和输入相同的类。获取无线电元件的值，隐藏除了适用于选定无线电的那个类别以外的所有输入。 –

@MattWhipple不明白'onchange'的浏览器会忽略它，所以这已经不显眼了;这是否是好的做法是另一回事。 –

我做了一个快速的jsfiddle是整理这一点。

1）分配一个类的任何显示输入 2）分配另一个类来隐藏了输入 3）在一个单独的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">

$(document).ready(function() { 
    $(".open").on("change", function(event) { 

     $('#input2').show(); 
    }); 

    $(".close").on("change", function(event) { 

     $('#input2').hide(); 
    }); 
});

来源

2012-11-19 03:51:00 m4nw17h4pl4n

不要使用“live” - 它在jQuery中已被弃用。改为使用“开”。 – JasCav

感谢，编辑，使用于：D – m4nw17h4pl4n

有一件事你可以做的是通过JavaScript设置的事件处理程序，而不是像该HTML他们捆绑。使用jquery选择器来选择单选按钮，然后将这些事件添加到一个地方。

通过JavaScript做的事情也给你就当初始化代码，您如何运行的东西更多的灵活性等

来源

2012-11-19 03:15:29 hugomg

你可以这样做一对夫妇不同的方式，但它在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正常。

在任何情况下，您都可以在this jsFiddle example上看到此示例。

来源

2012-11-19 04:02:44 JasCav

如何重构jQuery代码中的这些回调？

回答

相关问题