Question

我在其中创建了一张卡片，我提供了两个输入，一个用于提问，另一个用于选项，所以在这里我希望第二个输入（即选项）在同一张卡中获得更多数量的选项以及我＆＃39 ; m尝试使用问题和选项输入动态获取卡片更多次。请帮帮我。

<body>
            <form method="post" action="">
                <div class="cardBox">
                    <div class="block">
                        <div class="card">
                           <div style="display: flex;">
                            <input type="text" name="" class="form-control" placeholder="Enter Your Question"/>
                            <span class="removeCard">Remove</span>
                           </div>
                            <div class="form-group fieldGroup">
                                <div class="input-group">
                                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                                    <div class="input-group-addon">
                                        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                                    </div>
                                </div>
                            </div>

                            <!-- copy of things -->
                            <div class="form-group fieldGroupCopy" style="display: none;">
                                <div class="input-group">
                                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                                    <div class="input-group-addon">
                                        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <span class="add">ADD</span>
                </div>
            </form>

            </body>

            <script src="jquery.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){

                    var maxGroup = 50;

                    //add more fields group
                    $(".addMore").click(function(){
                        if($('body').find('.fieldGroup').length < maxGroup){
                            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                            $('body').find('.fieldGroup:last').after(fieldHTML);
                        }else{
                            alert('Maximum '+maxGroup+' groups are allowed.');
                        }
                    });

                    //remove fields group
                    $("body").on("click",".remove",function(){
                        $(this).parents(".fieldGroup").remove();
                    });
                });

                $('.add').click(function(){
                    $('.block:last').after(`<div class="block">
                    <div class="card">
                    <input type="text" name="" class="form-control" placeholder="Enter Your Question"/><span class="removeCard">Remove</span>
                     <div class="form-group fieldGroup">
                <div class="input-group">
                    <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                    <div class="input-group-addon">
                        <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                    </div>
                </div>
            </div>
                        <div class="form-group fieldGroupCopy" style="display: none;">
                        <div class="input-group">
                        <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
                        <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
                        <div class="input-group-addon">
                        <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                        </div>
                        </div>
                        </div>
                        </div></div>`)

         $(document).ready(function(){
            //group add limit
            var maxGroup = 50;

            //add more fields group
            $(".addMore").click(function(){
                if($('body').find('.fieldGroup').length < maxGroup){
                    var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                    $('body').find('.fieldGroup:last').after(fieldHTML);
                }else{
                    alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });

            //remove fields group
            $("body").on("click",".remove",function(){
                $(this).parents(".fieldGroup").remove();
            });
        });
        });enter code here

        $('.cardBox').on('click','.removeCard',function(){
            $(this).parent().remove();
        });
            </script>

Answer 1

我用你的代码玩了 little ，尝试优化整个代码并避免重复...
为此，我做了以下修改：

将HTML代码从JS移动到HTML，以便HTML保持HTML格式。
对于CSS来说，最好不要在HTML中使用内联CSS，因此添加了类＆＃34;隐藏＆＃34;将其用于style="display: none;"的元素。
没有重复的HTML，更短的JS ......表单开始为空，JS添加了一个＆＃34; block＆＃34;使用HTML中的模板加载。这样，我们确保整个表格永远都是一样的。

...最终得到了这个工作片段：
（有关详细信息，请参阅代码中的注释）

＆＃13;

var maxGroup = 50;

// TAKIT: Added these variables to use the "templates" I added in HTML
var blockTemplate = $('#Templates > .block')[0].outerHTML;
var fieldTemplate = $('#Templates .fieldGroup:last')[0].outerHTML;

// Add another block
$('.add').click(function() {
  $('form .add').before(blockTemplate); // TAKIT: Modified
  // TAKIT: Removed the $(document).ready that was here ! What was that?
});

// TAKIT: Modified this function, too
// Add field
$('.cardBox').on('click', '.addMore', function() {
  if ($('form .fieldGroup').length > maxGroup) {
    alert('Maximum ' + maxGroup + ' groups are allowed.');
    return; // Exit
  }
  $(this).closest(".card").find('.fieldGroup:last').after(fieldTemplate); // TAKIT: Modified here
});

// Remove field
$('.cardBox').on('click', '.removeField', function() {
  $(this).parent().remove();
});

// TAKIT: Add a block on load
$('.add').trigger('click');

＆＃13;

/* TAKIT: Added some CSS */

.hidden {
  display: none;
}

.fieldGroup {
  display: flex;
}

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<body>
  <form method="post" action="">
    <div class="cardBox">
      <a class="add">[ADD block]</a>
    </div>
  </form>

  <!-- TAKIT: Created templates here, so that HTML stays in HTML -->
  <div class="hidden" id="Templates">
    <!-- TAKIT: block template -->
    <div class="block">
      <div class="card">
        <!-- TAKIT: field template -->
        <div class="fieldGroup">
          <input type="text" name="name[]" class="form-control" placeholder="Enter name" />
          <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>Add</a>
        </div>
        <div class="fieldGroup">
          <input type="text" name="" class="form-control" placeholder="Enter Your Question" />
          <a href="javascript:void(0)" class="btn btn-danger removeField"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>Remove</a>
        </div>
      </div>
      <br><!-- TAKIT: Added, just because -->
    </div>
  </div>

</body>

＆＃13;

请注意，我删除了一些元素，例如input-group和input-group-addon，因为我在代码段中并不需要它，但可以在HTML＆＃34;模板＆＃中轻松添加它34 ;.
如果有的话，请随时发表评论。

希望它有所帮助。

如何在点击按钮上动态获取卡片，同时点击卡片中的动态选项？

1 个答案: