为每个克隆创建一个新的 id

Question

我正在尝试在表单中克隆一个 div，同时还为每个输入提供一个唯一的 ID。我已经复制了相当多的代码，但这是为了全面了解我正在尝试创建的内容。

下面是我的html代码：

  <div class="form-step">
  <div id="readroot">
    <div class="checkbox">
      <label for="LegalEntity">Legal Entity</label>
      <input type="radio" name="choice2" id="legalEntity2" value="legalEntity" onclick="filterForm2()" />
      <label for="Individual">Individual</label>
      <input type="radio" name="choice2" id="Individual2" value="Individual" onclick="filterForm2()" />
    </div>
    <div id="lec2" class="legal-entity-content">
      <div class="input-group">
        <label for="CompanyName">Company Name</label>
        <input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="RegisteredAddress">Registered Address</label>
        <input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="RegistrationNumber">Registration Number</label>
        <input type="text" name="RegistrationNumber" id="RegistrationNumber" placeholder="Ex. MyPocketCounsel" />
      </div>

      <div class="input-group">
        <label for="Definedas">Defined as...</label>
        <input type="text" name="Definedas" id="Definedas" placeholder="Ex. MyPocketCounsel" />
      </div>
    </div>
    <div id="ic2" class="individual-content hide">
      <div class="input-group">
        <label for="First Name">First Name</label>
        <input type="text" name="First Name" id="First Name" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Last Name">Last Name</label>
        <input type="text" name="Last Name" id="Last Name" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Address">Address</label>
        <input type="text" name="Address" id="Address" placeholder="Ex. MyPocketCounsel" />
      </div>
      <div class="input-group">
        <label for="Defined as">Defined as...</label>
        <input type="text" name="Defined as" id="Defined as" placeholder="Ex. MyPocketCounsel" />
      </div>
    </div>
    <input type="button" value="Remove Lender" class="btn btn-remove-lender"
    onclick="if (counter >= 1){
        counter --;
        this.parentNode.parentNode.removeChild(this.parentNode);
    }else{alert('you must have at least one Lender');}">
  </div>
  <span id="writeroot"></span>
    <div class="btns-group">
      <input type="button" id="morefields" value="Add Lender" class="btn btn-add-lender" onclick="moreFields()">

      <a href="#" class="btn btn-prev">Previous</a>
      <a href="#" class="btn btn-next">Next</a>
  </div>

下面是我的javascript：

    const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum++;
    updateFormSteps();
    updateProgressbar();
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");



function filterForm() {
 
  if(document.getElementById('legalEntity').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec");
legalEntityContent.classList.remove("hide");
console.log('AAA')
  }else  {
    const legalEntityContent = document.getElementById("lec");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic");
IndividualContent.classList.remove("hide");

    console.log('BBB')
  }
}
function filterForm2() {
 
  if(document.getElementById('legalEntity2').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec2");
legalEntityContent.classList.remove("hide");
console.log('YYY');
  }else  {
    const legalEntityContent = document.getElementById("lec2");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.remove("hide");

    console.log('NNN');
  }
  
   if(document.getElementById('legalEntity3').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec2");
legalEntityContent.classList.remove("hide");
console.log('YYY');
  }else  {
    const legalEntityContent = document.getElementById("lec2");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic2");
IndividualContent.classList.remove("hide");

    console.log('NNN');
  }
}

let counter = 0;
function moreFields() {
 
    counter ++;
    let newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    let newField = newFields.childNodes;
    for (let i=0;i<newField.length;i++) {
        let theName = newField[i].name;
        if (theName)
            newField[i].name = theName + counter;
    }
    let insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
  console.log('is not'+ counter);
  console.log("more fields worked");
}


function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}

function updateSymbol(e){
  var selected = $(".currency-selector option:selected");
  $(".currency-symbol").text(selected.data("symbol"))
  $(".currency-amount").prop("placeholder", selected.data("placeholder"))
  $('.currency-addon-fixed').text(selected.text())
}

$(".currency-selector").on("change", updateSymbol)

updateSymbol()

有没有办法用id 'readroot' 克隆div，同时将两个无线电输入的ID 更改为legalEntity3 和Individual3。

对不起，我是新手，任何帮助将不胜感激

Answer 1

这里有很多重复的代码，所以顺便说一句，我绝对建议查看AlpineJs 或VueJs 来帮助你。这是一种不同的工作方式，但实现相同且更复杂的交互性要简单得多。

回答你的问题。我可能会走在<template> 标记内复制要复制的html 的路线。这是一个简化的示例：

HTML

您可以在下面的 sn-p 中看到我添加了一些占位符 {i}，它们可以很容易地成为您想要的任何东西，例如%%placeholder%%{replace}::replace::

Javascript

现在我们可以在 javascript 中克隆模板内容，将其添加到临时 div 中，替换 divs innerHtml 中的占位符并将 div 附加到输出：

let counter = 0;
let template = document.getElementById('source');
let output = document.getElementById('output');

function moreFields() {
  counter++;

  let div = document.createElement('div');

  div.appendChild(
    template.content.cloneNode(true)
  );

  div.innerHTML = div.innerHTML.replaceAll('{i}', counter);

  output.append(div);
}

for (i = 0; i < 3; i++) {
  moreFields();
}

<template id="source">
  <div class="checkbox">
    <label for="legalEntity{i}">Legal Entity</label>
    <input type="radio" name="choice{i}" id="legalEntity{i}" value="legalEntity{i}" onclick="filterForm({i})" />
    <label for="individual{i}">Individual</label>
    <input type="radio" name="choice{i}" id="individual{i}" value="individual{i}" onclick="filterForm({i})" />
  </div>
</template>

<div id="output">

</div>

---

作为比较，这里是使用 AlpineJs 实现的相同的东西：

<script src="https://unpkg.com/alpinejs@3.4.1/dist/cdn.min.js"></script>

<div x-data="{
  filter(num) {
    console.log(num)
  }
}">
  <template x-for="i in 10">
    <div :key="i" class="checkbox">
        <label>
          Legal Entity
          <input type="radio" :name="'choice' + i" :value="'legalEntity' + i" @click="filter(i)" />
        </label>
      
        <label>
           Individual
          <input type="radio" :name="'choice' + i" :value="'individual' + i" @click="filter(i)" />
        </label>
      </div>
  </template>
</div>