Как получить карту динамически при нажатии кнопки вместе с опциями динамического нажатия в карте? - PullRequest
Новая
       1

Как получить карту динамически при нажатии кнопки вместе с опциями динамического нажатия в карте?

0 голосов
/ 26 мая 2018

Я создал карту внутри нее, я дал два ввода, один для вопроса и другой для варианта, поэтому здесь я хочу, чтобы второй вход (т.е. вариант), чтобы получить большее количество вариантов в той же карте, и я такжепытаться получить карту динамически большее количество раз с помощью ввода вопросов и опций.Пожалуйста, помогите мне. 

<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>

1 Ответ

0 голосов
/ 26 мая 2018

Я сыграл немного с вашим кодом, пытаясь оптимизировать весь код и избежать дублирования ...
Чтобы добиться этого, я сделал следующие модификации:

  • ПеремещеноHTML-код из JS в HTML, так что HTML остается в HTML.
  • То же самое для CSS, лучше не использовать встроенный CSS в HTML, поэтому добавлен класс «скрытый», чтобы использовать его для элементов сstyle="display: none;".
  • Нет дубликата HTML, короче JS… Форма начинается пусто, JS добавляет один «блок» при загрузке, используя шаблон в HTML.Таким образом, мы гарантируем, что вся форма всегда будет одинаковой.

… в итоге получим этот рабочий фрагмент:
(подробности см. В комментариях к коду) 

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');
/* TAKIT: Added some CSS */

.hidden {
  display: none;
}

.fieldGroup {
  display: flex;
}
<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>

Обратите внимание, что я удалил некоторые элементы, такие как input-group и input-group-addon, потому что они мне не нужны во фрагменте, но это может бытьлегко добавляется обратно в HTML «шаблоны».
Не стесняйтесь комментировать, если что-нибудь.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...