Question

我在结帐页面设置了复制功能。其唯一目的是复制为他们输入的客户发货信息输入的文本，并在确认部分的页面下方进一步显示。

它非常适合客户名称和地址1行。但地址2，城市，州和邮政编码行不会显示。我不知道为什么。我正在做与我为address1和name做的完全相同的事情。我试过更改数据副本名称，但没有任何工作。

客户可以在此处输入运输信息。

<div class="shippinginfocontainer">
    <span class="summarytitle"><p>Enter Shipping Information</p> 
</span><br>
    <div class="center">
        <div class="field">
            <label class="paddingleft" for="fullname">Full Name</label>
            <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
            </div>
            <div class="field">
                <label class="paddingleft" for="streetline1">Street Line 1</label>
                <div class="center"><input type="text"  class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required></div>
                </div>
            <div class="field">
                <label class="paddingleft" for="streetline2">Street Line 2</label>
                <div class="center"><input type="text"  class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="<?php echo escape($user->data()->streetline2); ?>"></div>
                </div>
            <div class="field">
                <label class="paddingleft" for="city">City</label>
                <div class="center"><input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="<?php echo escape($user->data()->city); ?>" required></div>
                </div>
            </div>
            <div class="formleftcenter">
                <div class="field">
                    <label for="state">State</label>
                    <input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="<?php echo escape($user->data()->state); ?>" required>
                </div>  
            <div class="formrightcenter">
                <div class="field">
                    <label for="zipcode">Zip Code</label>
                    <input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
                </div>

然后我将文本复制到此处（我将状态保留为一个）：

<p>Shipping to:</p>
    <p><div id="name"></div></p>
    <p><div id="address1"></div></p>
    <p><div id="address2"></div></p>
    <p><div id="confirmcity"></div></p>
    <p><div id="confirmzip"></div></p>

Jquery

$(document).ready(function() {


 $(".preview").on('input', function() {
    $($(this).data('copy')).html($(this).val());
  });
});

知道为什么不对这些输入进行处理吗？

Answer 1

您只有预览＆＃39;全名和地址1行。

您的jquery选择器正在选择页面上的所有元素＆＃39;预览＆＃39;，因此内部逻辑仅适用于具有类＆＃39;预览的HTML元素。

您希望更改其余输入以包含预览＆＃39;类。

Answer 2

你有名字和预览课程地址1输入字段

<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>

但您在其他输入字段中没有预览类

<input type="text"  class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2">

在其他输入字段类中添加预览

Answer 3

我无法与php部分对话，但HTML和jquery看起来应该是这样的：

window.addAddress = function() {
    var inputs = $('input').map(function () {
        return $(this).val();
    });
    var i = 0;
    $.each($('.data'), function(){
        $(this).html(inputs[i]);
        i++;
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shippinginfocontainer"> <span class="summarytitle"><p>Enter Shipping Information</p> 
</span>
    <br>
    <div class="center">
        <div class="field">
            <label class="paddingleft" for="fullname">Full Name</label>
            <div class="center">
                <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" value="Mickey Gordon" required>
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="streetline1">Street Line 1</label>
            <div class="center">
                <input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" value="Suite 105" required>
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="streetline2">Street Line 2</label>
            <div class="center">
                <input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="701 Rackamac Ln">
            </div>
        </div>
        <div class="field">
            <label class="paddingleft" for="city">City</label>
            <div class="center">
                <input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="Oxnard" required>
            </div>
        </div>
    </div>
    <div class="formleftcenter">
        <div class="field">
            <label for="state">State</label>
            <input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="California" required>
        </div>
        <div class="formrightcenter">
            <div class="field">
                <label for="zipcode">Zip Code</label>
                <input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="93031" required>
            </div>
            <p>Shipping to:</p>
            <p>
                <div id="name" class="data"></div>
            </p>
            <p>
                <div id="address1" class="data"></div>
            </p>
            <p>
                <div id="address2" class="data"></div>
            </p>
            <p>
                <div id="confirmcity" class="data"></div>
            </p>
            <p>
                <div id="confirmzip" class="data"></div>
            </p>
            <input type="button" value="Add" onclick="addAddress()" />

复制功能仅适用于某些输入

3 个答案: