在Jquery或Javascript中為附加的表單添加唯一的ID

我有一個范圍輸入來顯示用戶想要的問題數量。在他們改變了范圍輸入的值后，用戶按下了提交按鈕。然后一個表單被附加。從這里開始，一切都很好。但是現在我希望附加的表單有不同的ID，例如，第一個表單的ID是 "form1"，第二個表單的ID是 "form2"，等等。我找不到一種方法來給每個附加的表單以不同的ID。

HTML

<form style="margin-left: 5px;"> 
        <div id="marginOnTheLeft"/span>>
       <label for="question1">多少個問題？ </label>多少問題？
      < input type="range" id="question1" name="questions1" min="5" max="20"> <br>>
            價值。 <p id="value1"/span>> </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, 點擊更多! " height="16px">< /i></p>/span>
       < label for="question2" class="hiddenRange">/span>How Many Questions? </label>
      < input type="range" id="questions2" class="hiddenRange" name="questions2" min="21"/span> max="30"/span> disabled> < i id="ex" class="fa-exclamation-circle info hiddenRange"  data-toggle="tooltip" data-placement="right" title="For Pro user. " height="16px">< /i><br> 
          <span class="hiddenRange">/span>Value: <p id="value2" class="hiddenRange">> </p></span> 
      < label for="question3" class="hiddenRange">/span>多少個問題？ </label>
      < input type="range" id="questions3" class="hiddenRange" name="questions3" min="31"/span> max="100"/span> disabled> < i id="ex" class="fa-exclamation-circle info hiddenRange"  data-toggle="tooltip" data-placement="right" title="For Premium user. " height="16px">< /i><br> 
          <span class="hiddenRange">/span>Value: <p id="value3" class="hiddenRange">> </p></span> 
          < button id="genBtn"/span> type="button" class="btn btn-dark"> 生成</button>< br><br> 
            <div class="addedQuestions"> <br></div>
            < button type="button" id="preview" class="btn btn-primary"> 預覽</按鈕> 
          </div>/span>
      </form> 

Jquery(從附加部分)

 $（document）.ready(function() {
                  $('#genBtn').on('click', function() {
                  
                    // 檢查輸入的值是否為數字，否則我們將不執行for-loop程式
                    var xds = parseInt($("#questions1").val())。
                    如果(!isNaN(xds)) {
                      //如果我們想重置.addedQuestions div的內容，我們需要以下一行
                      $('.addedQuestions').html(')。

                      //生成span.dashes-x，并將其附加在上面
                      for (var i = 0; i < xds; i  ) {
                       
                          
                        var $newTile = '<form class="append"/span>> <p id="qNumber"/span>> </p> < div class="col-auto my-1"> < label class="mr-sm-2 sr-only"/span> for="inlineFormCustomSelect"/span>> Preference</label>< select class="custom-select mr-sm-2" id="inlineFormCustomSelect" /span>> <option selected>多少個問題。 .. </option><。 option value="1"/span> name="1"/span>> 1</option>< option value="2"/span> name="2"/span>> 2</option> <option value="3"/span> name="3"/span>> 3</option> < option value="4"/span> name="4"/span>> 4< /option>< option value="5" name="五"> 5</option>< <select> </div> <span class="dashed-x"/span> style="display: block">< input type="text"/span> class="questionInput" placeholder="Write Your Question"> <br><br> < input type="radio"/span> name="options"/span>> < input type="text" placeholder=" Option 1" class=" optionInput"> <br> < input type="radio"/span> name="options"/span>> < input type="text" placeholder=" Option 2" class=" optionInput"> < br>< input type="radio"/span> name="options"/span>> < input type="text" placeholder=" Option 3" class=" optionInput"> <br> < input type="radio"/span> name="options"/span>> < input type="text" placeholder=" Option 4" class=" optionInput"> < br>< input type="radio"/span> name="options"/span>> < 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"，等等

uj5u.com熱心網友回復：

$(document). ready(function() {
             
                  $('#genBtn').on('click'，function() {
                   var formId=0;
                    //檢查輸入的值是否是一個數字，否則我們不會執行for-loop。
                    var xds = parseInt($("#questions1"/span>).val()
                    if (!isNaN(xds)) {
                      //如果我們想重置.addedQuestions div的內容，我們需要以下一行。
                      $('.addedQuestions').html('') 。

                      //產生span.dashes-x并附加它們。
                      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><選項值="1" name="1">1</option><選項值="2" name="2">2</option><選項值="3" name="3">3</option><。 option value="4" name="4">4</option><option value="5" name="5">5</option></select> </div> <span class="dashed-x" style="display: block"><input type="text" class="questionInput" placeholder="Write Your Question"><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>'/span>。
                        $('.addedQuestions').append（$newTile）。
                      }
                    }
                  });
                     
                });

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>/span>
<form style="margin-left: 5px;">/span>
        <div id="marginOnTheLeft"/span>>
       <label for="question1">多少個問題？ </label>多少問題？
      < input type="range" id="question1" name="questions1" min="5" max="20"> <br>>
            價值。 <p id="value1"/span>> </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, 點擊更多! " height="16px">< /i></p>/span>
       < label for="question2" class="hiddenRange">/span>How Many Questions? </label>
      < input type="range" id="questions2" class="hiddenRange" name="questions2" min="21"/span> max="30"/span> disabled> < i id="ex" class="fa-exclamation-circle info hiddenRange"  data-toggle="tooltip" data-placement="right" title="For Pro user. " height="16px">< /i><br> 
          <span class="hiddenRange">/span>Value: <p id="value2" class="hiddenRange">> </p></span> 
      < label for="question3" class="hiddenRange">/span>多少個問題？ </label>
      < input type="range" id="questions3" class="hiddenRange" name="questions3" min="31"/span> max="100"/span> disabled> < i id="ex" class="fa-exclamation-circle info hiddenRange"  data-toggle="tooltip" data-placement="right" title="For Premium user. " height="16px">< /i><br> 
          <span class="hiddenRange">/span>Value: <p id="value3" class="hiddenRange">> </p></span> 
          < button id="genBtn"/span> type="button" class="btn btn-dark"> 生成</button>< br><br> 
            <div class="addedQuestions"> <br></div>
            < button type="button" id="preview" class="btn btn-primary"> 預覽</按鈕> 
          </div>/span>
      </form>/span>

下面是一個如何添加表單Id的例子。我已經創建了一個變數，它將在每次回圈迭代時遞增，并在點擊生成按鈕時被重置。你也可以在某些事件后重置表單ID。我希望這能回答你的問題。

標籤：

上一篇：如何防止Jquery對話框脫離頁面？

下一篇：沿著一條線均勻地分布N個點