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

Posted 2023-05-08

【中文标题】在 Jquery 或 Javascript 中向附加表单添加唯一 ID

【英文标题】：Adding a unique id to appended forms in Jquery or Javascript

【发布时间】：2021-08-23 00:10:27

【问题描述】：

我有一个范围输入来显示用户想要的问题数量。在他们更改范围输入的值后，用户按下提交按钮。然后附加一个表格。从这里开始一切都很好。但是现在我希望附加的表单具有不同的 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!" ></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." ></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." ></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”，等等。

【问题讨论】：

我觉得它缺少一些东西但是你可以试试'<form id="form'+ ($('.addedQuestions > form').length + 1) +'" class="append"><.....

有没有办法检查 id 是否存在，我知道我可以通过点击和其他东西来测试它，但是有没有内置函数。

检查 id 是否存在 if($('#id').length) //exists else // not exists .. 注意 Id 应该是唯一的[不要为多个元素重复相同的 id]

Mohamed-Yousef 和 anand shukla 的答案都有效，但其中一个在评论中，一个是答案。

只是一个一般问题 '+ ($('. addedQuestions > form').length + 1) +' 适用于 id 和 classes，但不适用于 name 属性。应该是这样吗？

【参考方案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!" ></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." ></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." ></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。我希望这能回答你的问题。

【讨论】：

如何将类 qNumber 的值变成问题编号？

我假设在每次生成时您都在为每个问题创建表单，因此您可以将 qNumber 的值替换为 formId。这样可以正常工作。