Какой будет код Javascript для этого для изменения идентификатора каждого тега при каждом создании клона? - PullRequest
Новая
       69

Какой будет код Javascript для этого для изменения идентификатора каждого тега при каждом создании клона?

0 голосов
/ 17 июня 2020

Я хочу клонировать шаблон и показывать его <div id= "wrapper"> с другим идентификатором каждый раз, когда я создаю клон. Когда я нажимаю кнопку добавления нового проекта, новый шаблон каждый раз отображается с другим идентификатором.

Javascript код: 

$("document").ready(function () {
    var cloneCntr = 1;
    var i = 0;
    $("#projectData").on('click', function () {


        $('template').children().each(function () {
            this.id = this.id+ this.i;
        });
        var temp = document.getElementsByTagName("template")[0];
        var clon = temp.content.cloneNode(true);
        i++;
        $('#wrapper').append(clon);
      });
  });

Html код: 

 <form id="projectForm">
        <div class="container">
  //////  ---------------------code-------////           <br>
            <br>
            <h4>Project Experience</h4>
            <hr>
            <template id="template">

                    <br>
                    <br>
                    <div class="form-row">
---------Template Code-------
                    </div>

                </div>

                <hr>
            </template>
        </div>
        <div id="wrapper" class="container">

            </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <div class="container">
        <button type="button" id="projectData" class="btn btn-primary">Add New Project</button>
    </div>

</body>
</html>

Я хочу заменять каждый тег «id» в шаблоне каждый раз, когда я делаю его клон.

1 Ответ

1 голос
/ 17 июня 2020

Вот пример того, как это могло бы сработать для вас.

См. Демонстрацию здесь: https://jsfiddle.net/o76pqxyw/

Вот скриншот, показывающий, как меняются идентификаторы: https://www.loom.com/share/4a1556c4bb5c4422ad1d4b20a12a638a

HTML

<div id="template-form">
  <p><label>First Name</label> <input type="text" id="first-name" /></p>
  <p><label>Last Name</label> <input type="text" id="last-name" /></p>
</div>
<button id="btn">Add New User</button>

<div id="container"></div>

Javascript

const button = $('#btn');
const target = $('#container');
let counter = 0;


$(button).on('click', () => {
  const template = $('#template-form');
    const copy = $(template).clone();
  counter++;

    const elements = $(copy).find('input');
  $(elements).each(function(index) {
    const currentId = $(this).attr('id');
    const newId = currentId + '-' + counter;
    $(this).attr('id', newId);
  });

  $(target).append(copy);
})
...