JavaScript-如何使用输入字段动态创建多个 div

Posted 2023-04-18

【中文标题】JavaScript-如何使用输入字段动态创建多个 div

【英文标题】：JavaScript- how to create dynamically multiple divs with inputs field

【发布时间】：2015-04-09 07:01:35

【问题描述】：

我必须创建 3 个输入文本框来获取有关姓名和电子邮件地址的用户输入。 我必须动态创建它，即当用户点击电子邮件输入字段时，应该创建所有三个元素的新行。 这是一行 3 个输入的代码：

<div class='row' id="inputcontainer">
        <div class="form-group clearfix" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

如何动态创建？

我正在使用以下代码进行克隆，它克隆了多次而不是 1

maxIndex = 0;
$('form').on('input','.email',function()

    $(this).parent().find('.common-sprite').removeClass('disNone');
    var lastmail = $(this);                                                                                  if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) 
        var count = $('.row.inputcontainer').length;
        console.log(count);
        maxIndex++;
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
        clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
        clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
        $('.inputcontainer').append(clone);
    

【参考方案1】：

像这样？我使用.blur() 来触发动态添加，这样如果您在电子邮件输入中键入内容并在其外部单击，则会显示接下来的 3 行信息。我还添加了一些类来帮助 jquery 更快、更可靠地找到元素。我每次都使用clone() 重新创建3行的相同结构。

$(document).ready(function() 
    $('.email').on('blur', function() 
        if($(this).val().length > 0) 
            var count = $('.row').length;
            console.log(count);
            var clone = $('#template').clone(true).attr('id', '');
            clone.find('.firstName').attr('id', 'firstName' + count).val('');
            clone.find('.lastName').attr('id', 'lastName' + count).val('');
            clone.find('.email').attr('id', 'inputMail' + count).val('');
            $('body').append(clone);
                 
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
    <div class="form-group clearfix" >
        <div class="col-md-2 col-md-offset-2">
            <div class="form-text-field first-name">
                <label>First name</label>
                <input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-text-field last-name">
                <label>Last name</label>
                <input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-text-field email">
                <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                </div>
            </div>
        </div>
    </div>
</div>

希望这会有所帮助！

【讨论】：

问题是它们必须与我最初创建的类相同

@saritrotshild，是的，这是你不想要的吗？为什么？ id 必须是唯一的，但类不必是唯一的。我更改了输入的 id 以便它们是唯一的...如果您希望整行是唯一的，您可以对行 id 实现相同的计数。

@ndubitablee- 我正在使用以下代码进行克隆，它克隆了多次而不是 1：

@saritrotshild 我不明白你想要什么，这使得我的回答不足以帮助你解决动态复制问题......

【参考方案2】：

这和你想要的相似吗？

$(document).on("blur",".add",function()
   
    $("#inputcontainer").append("<br />");
    $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
    $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
    $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. [e-mail]' /><br />");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. [e-mail]"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

在电子邮件文本框中输入内容，然后离开以创建新的文本框。

【讨论】：

已更新，它包含一个动态的表单。我现在正在处理 css 来整理一下。

@saritrotshild 现在看看。

@Kylet-我觉得你不明白这个问题。所有 3 个输入必须在同一行。如果用户单击电子邮件字段，则必须创建具有 3 个输入的全新行

@saritrotshild 已更新。

您不应多次使用同一个 ID，ID 用于定位特定元素（其中之一）。