jquery如何将此代码写入函数

我有三个模块/部分，它们基本上做相同的事情，但有一些细微的区别。我试图将主要部分写入jquery函数，以便根据需要调用它，但无法正确构造它。有人能告诉我如何构造这个吗

这是我需要作为单独函数的部分，然后由其他函数调用

var mytextareaFld = $('#ta_holdAll');
        var fld_1 = $('#firstname').attr('name')+':  '+$('#firstname').val();
        var fld_2 = $('#lastname').attr('name')+':  '+$('#lastname').val();
        var fld_3 = $('#street_number').attr('name')+':  '+$('#street_number').val();
        mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);

jsfiddle:

下面的html/jquery代码：

<form>
    <p>First name: <input type="text" name="firstname" id="firstname" value="Paul"/></p>
    <p>Last name: <input type="text" name="lastname"  id="lastname" value="Ryan" /></p>
<p>Street #: <input type="text" name="street_number"  id="street_number" value="4605"/></p>
<p>Address: <input type="text" name="address" id="address"/></p>
<p>City: <input type="text" name="city" id="city" /></p>
<p>State: <input type="text" name="state" id="state"/>

<span id="myzip">Zip:</span> <input type="text" name="zip"  id="zip" />
    <br /><br />
<span id="allInfo">All Info:</span> <textarea id="ta_holdAll" rows="10" cols="30"></textarea><div id="charCnt"></div><br /><br />
    <input type="button" value="Add to Field" id="addField">
</form>

    $(document).ready(function(){
    $('#addField').on('click',function(){
        var mytextareaFld = $('#ta_holdAll');
        var fld_1 = $('#firstname').attr('name')+':  '+$('#firstname').val();
        var fld_2 = $('#lastname').attr('name')+':  '+$('#lastname').val();
        var fld_3 = $('#street_number').attr('name')+':  '+$('#street_number').val();
        mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);
    });

    $('#allInfo').on('click',function(){
        var mytextareaFld = $('#ta_holdAll');
        var fld_1 = $('#firstname').attr('name')+':  '+$('#firstname').val();
        var fld_2 = $('#lastname').attr('name')+':  '+$('#lastname').val();
        var fld_3 = $('#street_number').attr('name')+':  '+$('#street_number').val();
        mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);
        var $mytextareaFld = $('#ta_holdAll');
        var $outPutCount = $("#charCnt");
        var $ofText = " characters of 1000 remaining";
        var val = $mytextareaFld.val();
        var val2 = $outPutCount.text(val.length).append("<strong>"+$ofText+"</strong>");
    });

    $("#firstname,#lastname, #street_number").blur(function(){
        var mytextareaFld = $('#ta_holdAll');
        var fld_1 = $('#firstname').attr('name')+':  '+$('#firstname').val();
        var fld_2 = $('#lastname').attr('name')+':  '+$('#lastname').val();
        var fld_3 = $('#street_number').attr('name')+':  '+$('#street_number').val();
        mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);
    });
});

名字：

姓氏：

街道#：

地址:

城市：

声明：
邮编：



所有信息：


$（文档）.ready（函数（）{
$（'#addField'）。在（'click'，function（）上{
var mytextarefld=$（'ta#u holdAll'）；
var fld_1=$（'#firstname'）.attr（'name'）+'：'+$（'#firstname'）.val（）；
var fld_2=$（'#lastname'）.attr（'name'）+'：'+$（'#lastname'）.val（）；
var fld_3=$（'#街道编号'）.attr（'name'）+'：'+$（'#街道编号'）.val（）；
mytextareaFld.val（fld_1+'\n'+fld_2+'\n'+fld_3）；
});
$（'#allInfo'）。在（'click'，function（）上{
var mytextarefld=$（'ta#u holdAll'）；
var fld_1=$（'#firstname'）.attr（'name'）+'：'+$（'#firstname'）.val（）；
var fld_2=$（'#lastname'）.attr（'name'）+'：'+$（'#lastname'）.val（）；
var fld_3=$（'#街道编号'）.attr（'name'）+'：'+$（'#街道编号'）.val（）；
mytextareaFld.val（fld_1+'\n'+fld_2+'\n'+fld_3）；
var$mytextarefld=$（'ta#u holdAll'）；
变量$outPutCount=$（“#charCnt”）；
var$ofText=“剩余1000个字符”；
var val=$mytextarefld.val（）；
var val2=$outPutCount.text（val.length）.append（“”+$ofText+””）；
});
$（“#名，#姓，#街号”）.blur（函数（）{
var mytextarefld=$（'ta#u holdAll'）；
var fld_1=$（'#firstname'）.attr（'name'）+'：'+$（'#firstname'）.val（）；
var fld_2=$（'#lastname'）.attr（'name'）+'：'+$（'#lastname'）.val（）；
var fld_3=$（'#街道编号'）.attr（'name'）+'：'+$（'#街道编号'）.val（）；
mytextareaFld.val（fld_1+'\n'+fld_2+'\n'+fld_3）；
});
});

JS小提琴演示：

$（文档）.ready（函数（）{
函数AddStuff（事件）{
var mytextarefld=$（'ta#u holdAll'）；
var fld_1=$（'#firstname'）.attr（'name'）+'：'+$（'#firstname'）.val（）；
var fld_2=$（'#lastname'）.attr（'name'）+'：'+$（'#lastname'）.val（）；
var fld_3=$（'#街道编号'）.attr（'name'）+'：'+$（'#街道编号'）.val（）；
mytextareaFld.val（fld_1+'\n'+fld_2+'\n'+fld_3）；
}
$（'#addField'）。在（'click'，AddStuff'）上；
$（'#allInfo'）。在（'click'，函数（事件）{
AddStuff（事件）；
var$mytextarefld=$（'ta#u holdAll'）；
变量$outPutCount=$（“#charCnt”）；
var$ofText=“剩余1000个字符”；
var val=$mytextarefld.val（）；
var val2=$outPutCount.text（val.length）.append（“”+$ofText+””）；
});
$（“#名，#姓，#街#号”）.blur（AddStuff）；
});​

我添加了

事件

参数，这样，如果需要，您可以在单击时执行

事件.preventDefault（）

。哇，谢谢-不知道我使用了多少变体来实现这一点。再次感谢！！！没问题。如果你真的很有创意，你可以使用事件类型在你的函数中做不同的事情，以防你有轻微的变化。例如，

if（event.type='click'）执行不同的操作
$(document).ready(function(){

    function AddStuff(event) {
          var mytextareaFld = $('#ta_holdAll');
        var fld_1 = $('#firstname').attr('name')+':  '+$('#firstname').val();
        var fld_2 = $('#lastname').attr('name')+':  '+$('#lastname').val();
        var fld_3 = $('#street_number').attr('name')+':  '+$('#street_number').val();
        mytextareaFld.val(fld_1 +'\n' + fld_2 +'\n' + fld_3);
    }

    $('#addField').on('click', AddStuff);

    $('#allInfo').on('click',function(event){
        AddStuff(event);
        var $mytextareaFld = $('#ta_holdAll');
        var $outPutCount = $("#charCnt");
        var $ofText = " characters of 1000 remaining";
        var val = $mytextareaFld.val();
        var val2 = $outPutCount.text(val.length).append("<strong>"+$ofText+"</strong>");
    });

    $("#firstname,#lastname, #street_number").blur(AddStuff);
});​