使用定义的模式生成多个动态ID的函数

我正在尝试使用定义的模式生成一个生成多个动态ID的函数，我该怎么做？

followup： Vue.js：如何使用定义的模式生成多个动态ID

细节：

我正在创建一个动态的学校测试应用程序。 单击“添加问题”按钮时，将生成一个包含4个输入字段和4个单选按钮的div。 每个输入和单选按钮都需要有一个ID。 到目前为止，该函数生成一个值，我希望可以将其用作ID。 每个单选按钮都有一个名称，这样就可以只选择它所属的组中的一个选项。 使用每个按钮单击“添加问题”按钮（这是一个单选按钮），此特定“名称”用于计算按钮点击次数。 在计数器的帮助下，“问题”输入字段和“选项”输入字段（连接到单选按钮）的动态ID以此模式生成：

例

Testtitle-问题，选项

JavaScriptQ1 (Question) JavaScriptQ1O1 (Option) JavaScriptQ1O2 JavaScriptQ1O3 JavaScriptQ1O4 

由于在启动测试时会生成一个div，并且只通过按钮点击生成ID，因此一个div不会获得它的ID。 看起来上面例子中的ID只有一个问题，实际上是两个！

我目前没有使用saveTest（），它将用于将测试保存到mySQL数据库中，但它可能用于解决此问题！

1.我希望生成一个额外的“ID组”，因此每个输入字段都有一个ID，但我该怎么做？

2.当这个问题解决后，如何为单选按钮生成唯一的ID？

3.然后，我如何将生成的值用作ID。 如何将它们“附加”到输入字段和单选按钮？

4还有其他更好的解决方法吗？ ID必须遵循某种模式，因为它们将保存在数据库中，然后用于更正测试。

我知道这是一个相当复杂的问题，但我试图尽可能好地解释。

我建议你看看jsfiddle ！ 单击添加问题，您将看到它是如何工作的。

 var name=1; $("body").on('click', '#radioAddQuestion', function () { var singleQuestionModule = "singleQuestionModule"; var question = $(".module:first").clone() .find("input:text").val("").end(); var question_label = $(".question-label:first").clone(); $(question).find(':radio').prop('checked', false); $(question_label).insertBefore(".options-label:last"); $(question).insertBefore(".options-label"); $(question).find(':radio').attr('name', "n" + name); // Here is where the ID value is currently generated: name++; let questionId = theTitle + "Q" + name; console.log(questionId); for (a = 1; a <= 4; a++) { let optionId = theTitle + "Q" + name + "O" + a; console.log(optionId); } console.log(name) }); 

    
 
 
 Question: 
  
  
 
 Enter avaible options: 
  
     
 
     
   
 
 
  Add Question  Save Test  
  

Answer 1

我改变了剧本。 只是看看那个。 它将为您使用的所有控件生成动态ID。

 var name=1; var theTitle="online"; $("body").on('click', '#radioAddQuestion', function () { name++; $(".dynamicform").append(createQuestion(name)); }); $(".dynamicform").append(createQuestion(name)); function createQuestion(name){ var dynamic=` 
 
 Question: 
 
 
   
 
 
 
 Enter avaible options: 
 
  
 
     
 
 
 
     
 
 
 
     
 
 
 
     
 
  `; return dynamic; } 

 #singleQuestionModule { margin-left: 50px; } 

    
  
 
 
  
  
 
 
  Add Question  Save Test  
 
 
 
   

Answer 2

你为什么不在已经存在的元素上加上第一个id？ 如果你想使用id生成函数中出现的第一个id，要么更改id生成函数以便跳过它，要么使用onload来添加它。

这似乎是问题的明显解决方案，所以也许我误解了它。