0

基本的に同じことを行うモジュール/セクチノが 3 つありますが、若干の違いがあります。必要に応じて呼び出すことができるように、主要部分を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: http://jsfiddle.net/justmelat/v4sZb/

以下の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);
    });
});
4

1 に答える 1

0

JSフィドルデモ： http： //jsfiddle.net/lucuma/jmhmE/1/

$(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);
});​
于 2012-06-05T16:10:13.837 に答える