0

好的。jQuery 不是我的强项。我在另一个 DIV 中显示人们输入的实时地址。必须有：

1）在没有所有变量的情况下迭代字段的更好方法？

2）我的选择 onchange 不起作用/显示值？

非常感谢任何想法/帮助。

jQuery(function($) {
    var billfirstname = $('#billing_first_name'),
    preview_first_name = $('#billing_first_name_mirror');
    var billlastname = $('#billing_last_name'),
    preview_last_name = $('#billing_last_name_mirror');
    var billadd1 = $('#billing_address_1'),
    preview_bill1 = $('#billing_address_1_mirror');
    var billadd2 = $('#billing_address_2'),
    preview_bill2 = $('#billing_address_2_mirror');
    var billcity = $('#billing_city'),
    preview_bcity = $('#billing_address_city_mirror');
    var billstate = $('#billing_state option:selected'),
    preview_bstate = $('#billing_address_state_mirror');

    billfirstname.bind('keyup blur change click', function(e) {
       preview_first_name.text(billfirstname.val());
    });

    billlastname.bind('keyup blur change click', function(e) {
       preview_last_name.text(billlastname.val());
    });

    billadd1.bind('keyup blur change click', function(e) {
       preview_bill1.text(billadd1.val());
    }); 

    billadd2.bind('keyup blur change click', function(e) {
       preview_bill2.text(billadd2.val());
    });
    billcity.bind('keyup blur change click', function(e) {
       preview_bcity.text(billcity.val());
    });
    billstate.bind('change',function(e) {
       preview_bstate.text(billstate.val());
    });  

});

HTML 看起来像这样 - 除了 billstate 的 selet 之外，它都可以正常工作：

   <p class="form-row form-row-first" id="billing_first_name_field">
                <label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="" value="" />
            </p>    


<p class="form-row form-row-last" id="billing_last_name_field">
                <label for="billing_last_name" class="">Last Name <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="" />
            </p><div class="clear"></div>   


<p class="form-row " id="billing_company_field">
                <label for="billing_company" class="">Company Name</label>
                <input type="text" class="input-text" name="billing_company" id="billing_company" placeholder="" value="" />
            </p><div class="clear"></div>   


<p class="form-row form-row-wide" id="billing_address_1_field">
                <label for="billing_address_1" class="">Address <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_address_1" id="billing_address_1" placeholder="" value="" />
            </p>    


<p class="form-row form-row-wide" id="billing_address_2_field">
                <label for="billing_address_2" class="hidden">Address 2</label>
                <input type="text" class="input-text" name="billing_address_2" id="billing_address_2" placeholder="" value="sdfgsdfgs" />
            </p><div class="clear"></div>   


<p class="form-row form-row-third" id="billing_city_field">
                <label for="billing_city" class="">City <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_city" id="billing_city" placeholder="" value="sdfgs" />
            </p>    


<p class="form-row form-row-third-smaller-inline select" id="billing_state_field">
                <label for="billing_state" class="">State / Province <abbr class="required" title="required">*</abbr></label>
                <select name="billing_state" id="billing_state" class="select">
                    <option value="" >---</option><option value="AK" >AK</option><option value="AZ" >AZ</option><option value="AR" >AR</option><option value="CA" >CA</option><option value="CO" >CO</option><option value="CT" >CT</option><option value="DE" >DE</option><option value="DC" >DC</option><option value="FL" >FL</option><option value="GA" >GA</option><option value="HI" >HI</option><option value="ID" >ID</option><option value="IL" >IL</option><option value="IN" >IN</option><option value="IA" >IA</option><option value="KS" >KS</option><option value="KY" >KY</option><option value="LA" >LA</option><option value="ME" >ME</option><option value="MD" >MD</option><option value="MA" >MA</option><option value="MI" >MI</option><option value="MN" >MN</option><option value="MS" >MS</option><option value="MO" >MO</option><option value="MT" >MT</option><option value="NE" >NE</option><option value="NV" >NV</option><option value="NH" >NH</option><option value="NJ" >NJ</option><option value="NM" >NM</option><option value="NY"  selected='selected'>NY</option><option value="NC" >NC</option><option value="ND" >ND</option><option value="OH" >OH</option><option value="OK" >OK</option><option value="OR" >OR</option><option value="PA" >PA</option><option value="RI" >RI</option><option value="SC" >SC</option><option value="SD" >SD</option><option value="TN" >TN</option><option value="TX" >TX</option><option value="UT" >UT</option><option value="VT" >VT</option><option value="VA" >VA</option><option value="WA" >WA</option><option value="WV" >WV</option><option value="WI" >WI</option><option value="WY" >WY</option><option value="  " >---</option><option value="BC" >BC</option><option value="ON" >ON</option><option value="NL" >NL</option><option value="NS" >NS</option><option value="PE" >PE</option><option value="NB" >NB</option><option value="QC" >QC</option><option value="MB" >MB</option><option value="SK" >SK</option><option value="AB" >AB</option><option value="NT" >NT</option><option value="NU" >NU</option><option value="YT" >YT</option>
                </select>
            </p>    


<p class="form-row form-row-third-last input-text" id="billing_postcode_field">
                <label for="billing_postcode" class="">Zipcode <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_postcode" id="billing_postcode" placeholder="" value="" />
            </p>    


<p class="form-row form-row-first select" id="billing_country_field">
                <label for="billing_country" class="">Country <abbr class="required" title="required">*</abbr></label>
                <select name="billing_country" id="billing_country" class="select">
                    <option value="" >Select Country</option><option value="US"  selected='selected'>United States</option><option value="CA" >Canada</option>
                </select>
            </p><div class="clear"></div>   


<p class="form-row form-row-first input-text" id="billing_email_field">
                <label for="billing_email" class="">Email Address <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="billing_email" id="billing_email" placeholder="" value="" />
            </p>    


<p class="form-row form-row-last input-text" id="custom_billing_phone_field">
                <label for="custom_billing_phone" class="">Phone <abbr class="required" title="required">*</abbr></label>
                <input type="text" class="input-text" name="custom_billing_phone" id="custom_billing_phone" placeholder="" value="" />
            </p><div class="clear"></div>

进而写入我的 div （当然没有完成 - 只是测试）：

    <div id="shipadddiv">
    <span class="mirror_billing_first_name" id="billing_first_name_mirror"></span>&nbsp;&nbsp;<span class="mirror_billing_last_name" id="billing_last_name_mirror"></span><br>
    <span id="billing_address_1_mirror"></span>
    <span class="" id="billing_address_2_mirror"></span>
    <span id="billing_address_city_mirror"></span>&nbsp;&nbsp;<span id="billing_state_mirror"></span>&nbsp;&nbsp;<span id="billing_postcode_mirror"></span>


    </div>

*编辑 - 找出 onchange 选择。那是一个拼写错误。已更正，现在正在工作。代码运行良好，但要点是 - 可能有 400 种更好的方法可以更有效地编写它。*

4

2 回答 2

0

好吧，您可以通过向您的 html 输入添加属性来概括这一点。该属性，我们称之为 preview-id 将包含预览控件 id。

接下来只需编写一个选择器来查找所有具有预览属性的镜像输入，并使用结果创建绑定。

html

<input type="text" id="first-name" mirror-id="first-name-preview" />

<span id="first-name-preview" />

jQuery

$('input[mirror-id]').bind('keyup blur change click', function(e) {
    $('#' + this.attr('mirror-id')).text(this.val());
});

未经测试的 jQuery，但希望你能明白

于 2012-07-05T18:37:00.157 回答
0

这是可以解决问题 1 和 2 的示例。

$(document).ready(function(){
    var fields = ["billing_first_name","billing_last_name","billing_address_1","billing_address_2","billing_city","billing_address_city","billing_state"];
    for(var i=0; i<fields.length; i++){
         $("#" + fields[i]).bind('keyup blur change click', {'field': fields[i]}, function(event){
            $("#" + event.data.field + "_mirror").text($(this).val());
        });
    }
});

示例：jsFiddle

于 2012-07-05T18:40:52.097 回答