javascript - 填写之前的 append 输入字段

Question

我正在尝试添加其他字段，以防我的用户填写了一组输入。所以这个想法是，当他填写完该组中的最后一个输入时，同类项目的另一组输入会折叠/出现在现有的输入下。一组项目由三个输入组成。填写完该输入后，另一组输入将出现在下面。我将在下面展示我的代码。希望有人能帮助我!

<div class="new-providers">

                        <div class="provider-append" id="toggleExtraProvider">
                            <div class="form-group">
                                <label>Provider</label>
                                <input type="text" class="form-control" id="practiceProvider" placeholder="Full provider name with coredentials" />
                            </div>
                            <div class="form-group">
                                <label>NPI</label>
                                <input type="text" class="form-control" id="providerNPI" placeholder=" NPI" />
                            </div>
                            <div class="form-group">
                                <label>MM #</label>
                                <input type="text" class="form-control" id="providerM" placeholder="M Provider #" />
                            </div>

                            <hr />
                        </div>

</div>  

我尝试将 provider-append 类 append 到 new-providers 类

这是我的 jQuery 脚本:

<script type="text/javascript">
     $(document).ready(function() {
         $("#toggleExtraProvider div.form-group input").each(function() {
             if($(this).val() =! "") {
                 var target = $("new-providers");
                 target.append(".provider-append");
                 }
         }); 

     });​
</script>

Answer 1

您需要检查特定 div 中是否有空输入框，为此使用 filter() 如果所有输入框都已填满，则使用 jQuery clone() 克隆父 div(输入组)。而且您应该使用更改事件而不是输入，因为输入在这里会被过度杀伤，每次您更改文本框中的单个字符时，它都会运行，另一方面，当用户完成键入并且输入框失去焦点时，更改事件会触发。

$(document).ready(function () {

    $(document).on("change",".provider-append input",function(){
        var allHaveText;
        var parentDiv = $(this).closest("div.provider-append");
        emptyInputs=parentDiv.find("input[type=text]").filter(function () {
            return !this.value;
        });                  
        if(emptyInputs.length==0)
        {
            newGroup = parentDiv.clone().appendTo(".new-providers"); 
            newGroup.find("input[type=text]").each(function(){
                $(this).val("");
            });
        }
    });

});

这是一个工作示例

$(document).ready(function () {

    $(document).on("change",".provider-append input",function(){
        var allHaveText;
        var parentDiv = $(this).closest("div.provider-append");
        emptyInputs=parentDiv.find("input[type=text]").filter(function () {
            return !this.value;
        });                  
        if(emptyInputs.length==0)
        {
            newGroup = parentDiv.clone().appendTo(".new-providers"); 
            newGroup.find("input[type=text]").each(function(){
                $(this).val("");
            });
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-providers">

  <div class="provider-append">
    <div class="form-group">
      <label>Provider</label>
      <input type="text" class="form-control" placeholder="Full provider name with coredentials" />
    </div>
    <div class="form-group">
      <label>NPI</label>
      <input type="text" class="form-control" placeholder=" NPI" />
    </div>
    <div class="form-group">
      <label>MM #</label>
      <input type="text" class="form-control" placeholder="M Provider #" />
    </div>

    <hr />
  </div>

</div>

希望对你有帮助。