在 Jquery 或 Javascript 中向附加表单添加唯一 ID

Question

我有一个范围输入来显示用户想要的问题数量。在他们更改范围输入的值后，用户按下提交按钮。然后附加一个表格。从这里开始一切都很好。但是现在我希望附加的表单具有不同的 ID，例如，第一个表单的 id 为“form1”，第二个表单的 id 为“form2”，等等。我找不到给每个表单的方法附加形式不同的ID。

HTML

<form style="margin-left: 5px;">
        <div id="marginOnTheLeft">
       <label for="questions1">How Many Questions?</label>
      <input type="range" id="questions1" name="questions1" min="5" max="20"><br>
            Value:<p id="value1"></p>
        <p><a style="color: #0C56B3" id="more">More...  </a><i id="ex" class="fa fa-exclamation-circle info" data-toggle="tooltip" data-placement="right" title="Need more Questions, click more!" height="16px"></i></p>
       <label for="questions2" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions2" class="hiddenRange" name="questions2" min="21" max="30" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Pro users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value2" class="hiddenRange"></p></span>
      <label for="questions3" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions3" class="hiddenRange" name="questions3" min="31" max="100" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Premium users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value3" class="hiddenRange"></p></span>
          <button id="genBtn" type="button" class="btn btn-dark">Generate</button><br><br>
            <div class="addedQuestions"><br></div>
            <button type="button" id="preview" class="btn btn-primary">Preview</button>
          </div>
      </form>

Jquery（来自附加部分）

 $(document).ready(function() {
                  $('#genBtn').on('click', function() {
                  
                    // check if the entered value is a number, else we won't execute the for-loop
                    var xds = parseInt($("#questions1").val());
                    if (!isNaN(xds)) {
                      //if we want to reset content of .addedQuestions div we need the below line
                      $('.addedQuestions').html('');

                      // generate span.dashes-x and append them
                      for (var i = 0; i < xds; i++) {
                       
                          
                        var $newTile = '<form class="append"><p id="qNumber"></p><div class="col-auto my-1"><label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label><select class="custom-select mr-sm-2" id="inlineFormCustomSelect"><option selected>How Many Questions...</option><option value="1" name="1">1</option><option value="2" name="2">2</option><option value="3" name="3">3</option><option value="4" name="4">4</option><option value="5" name="five">5</option></select> </div><span class="dashed-x" style="display: block"><input type="text" class="questionInput" placeholder="Write Your Question"><br><br><input type="radio" name="options"><input type="text" placeholder=" Option 1" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 2" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 3" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 4" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 5" class="optionInput"></span></form><br><br><br><br><br><br><br><br><br>';
                        $('.addedQuestions').append($newTile);
                      }
                    }
                  });
                     
                }); 

如何给每个附加的表单一个唯一的 id，最好是后面的表单编号，比如第一个表单的 id 是“form1”，等等。

Answer 1

$(document).ready(function() {
             
                  $('#genBtn').on('click', function() {
                   var formId=0;
                    // check if the entered value is a number, else we won't execute the for-loop
                    var xds = parseInt($("#questions1").val());
                    if (!isNaN(xds)) {
                      //if we want to reset content of .addedQuestions div we need the below line
                      $('.addedQuestions').html('');

                      // generate span.dashes-x and append them
                      for (var i = 0; i < xds; i++) {
                       ++formId;
                          
                        var $newTile ='<h6>Form Id '+formId+'</h6>'+'<form class="append" id='+formId+'><p id="qNumber"></p><div class="col-auto my-1"><label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label><select class="custom-select mr-sm-2" id="inlineFormCustomSelect"><option selected>How Many Questions...</option><option value="1" name="1">1</option><option value="2" name="2">2</option><option value="3" name="3">3</option><option value="4" name="4">4</option><option value="5" name="five">5</option></select> </div><span class="dashed-x" style="display: block"><input type="text" class="questionInput" placeholder="Write Your Question"><br><br><input type="radio" name="options"><input type="text" placeholder=" Option 1" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 2" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 3" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 4" class="optionInput"><br><input type="radio" name="options"><input type="text" placeholder=" Option 5" class="optionInput"></span></form><br><br><br><br><br><br><br><br><br>';
                        $('.addedQuestions').append($newTile);
                      }
                    }
                  });
                     
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form style="margin-left: 5px;">
        <div id="marginOnTheLeft">
       <label for="questions1">How Many Questions?</label>
      <input type="range" id="questions1" name="questions1" min="5" max="20"><br>
            Value:<p id="value1"></p>
        <p><a style="color: #0C56B3" id="more">More...  </a><i id="ex" class="fa fa-exclamation-circle info" data-toggle="tooltip" data-placement="right" title="Need more Questions, click more!" height="16px"></i></p>
       <label for="questions2" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions2" class="hiddenRange" name="questions2" min="21" max="30" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Pro users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value2" class="hiddenRange"></p></span>
      <label for="questions3" class="hiddenRange">How Many Questions?</label>
      <input type="range" id="questions3" class="hiddenRange" name="questions3" min="31" max="100" disabled><i id="ex" class="fa fa-exclamation-circle info hiddenRange" data-toggle="tooltip" data-placement="right" title="For Premium users." height="16px"></i><br>
          <span class="hiddenRange">Value:<p id="value3" class="hiddenRange"></p></span>
          <button id="genBtn" type="button" class="btn btn-dark">Generate</button><br><br>
            <div class="addedQuestions"><br></div>
            <button type="button" id="preview" class="btn btn-primary">Preview</button>
          </div>
      </form>

这里是如何添加表单 ID 的示例。我创建了一个变量，该变量将在每次循环迭代时递增，并在单击生成按钮时重置。您还可以在某些事件后重置表单 ID。我希望这能回答你的问题。